如何在 Angular 8 中动态地在 ngFor 中执行 ngFor？

Question

嗨，我想要实现的是 ngFor 在 ngFor 内部具有动态值，这可能吗？我也尝试在其中使用 ngModel，但没有成功。这就是我所做的：

在我的 home.component.ts 中：

import { Component, OnInit } from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';

export interface Condition {
  value: string;
  viewValue: string;
}

export interface ListProduk {
  value: string;
  viewValue: string;
}

export interface DragBox {
  value: string;
  viewValue: string;
}

export interface ListModel {
  value: string;
  viewValue: string;
  single_item: string;
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {

  conditions: Condition[] = [
    { value: 'if', viewValue: 'IF' },
    { value: 'else', viewValue: 'ELSE' },
    { value: 'then', viewValue: 'THEN' },
    { value: 'if else', viewValue: 'IF ELSE' },
    { value: 'or', viewValue: 'OR' },
    { value: 'and', viewValue: 'AND' }
  ];

  listProduks: ListProduk[] = [
    { value: 'mcm-508', viewValue: 'MCM-508' },
    { value: 'bl-100 pl', viewValue: 'BL-100 PL' },
    { value: 'bl-150 bl', viewValue: 'BL-150 BR' },
    { value: 'bl-302gs', viewValue: 'BL-302GS' },
    { value: 'bl-52gl', viewValue: 'BL-52GL' }
  ];

  listModels: ListModel[] = [
    { value: 'conditions', viewValue: 'Condition', single_item:'condition' },
    { value: 'listProduks', viewValue: 'List Produk', single_item:'listProduk' },
  ]

  constructor() { }

  ngOnInit() {
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.listModels, event.previousIndex, event.currentIndex);
  }

}

然后这是我的 home.component.html ：

<p>home works!</p>

<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let listModel of listModels" cdkDrag>
        <mat-form-field>
            <mat-label>Pick {{listModel.value}} :</mat-label>
            <mat-select>
                <mat-option *ngFor="let {{listModel.single_item}} of {{listModel.value}}" [value]="{{listModel.single_item}}.value">
                    test
                </mat-option>
            </mat-select>
        </mat-form-field>
        <div>
            <i class="material-icons">
                arrow_right_alt
            </i>
        </div>
    </div>
</div>

我尝试动态循环 mat-select，因为我希望它循环一个具有不同名称的数组，我需要 listModel 数组中的值打印到 mat-select 内的 *ngFor。这是哪一行：

            <mat-option *ngFor="let {{listModel.single_item}} of {{listModel.value}}" [value]="{{listModel.single_item}}.value">
                test
            </mat-option>

如何正确地做到这一点？

更新的问题用 Ahmed 评论更新我的代码后，我的 Html 看起来像这样：

<p>home works!</p>

<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let listModel of listModels" cdkDrag>
        <mat-form-field>
            <mat-label>Pick {{listModel.value}} :</mat-label>
            <mat-select>
                <mat-option *ngFor="let a of listModel.value" [value]="a.value">
                    {{a.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <div>
            <i class="material-icons">
                arrow_right_alt
            </i>
        </div>
    </div>
</div>

这给了我这样的错误：

错误错误：找不到不同的支持对象“条件” 输入“字符串”。 NgFor 仅支持绑定到 Iterables，例如 数组。

我错过了什么？

Answer 1

您可以使用返回正确数组的函数来显示它。我们在模板中调用它。 小心，我绝不建议在模板中调用函数，如果这是可能的话。这会严重影响应用程序的性能。但是，如果您在此页面上没有太多内容，那么使用它是非常安全的。所以我建议如下：

<div *ngFor="let value of getList(listModel.value)">

并且该函数将返回正确的数组：

getList(value) {
  return this[value]
}

---

您还可以对模型进行轻微更改，并将带有正确数组的数组的可选参数传递给对象本身。你可以在OnInit：

ngOnInit() {
  this.listModels.forEach(x => {
    x.customArray = this[x.value]
  })
}

并在*ngFor 中像正常迭代一样使用它：

<div *ngFor="let value of listModel.customArray">

这是一个STACKBLITZ，有两个选项