如何在 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-[=35= 中的 *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>

这给了我这样的错误：

ERROR Error: Cannot find a differ supporting object 'conditions' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

我错过了什么？

Answer 1

您可以使用一个函数来显示它，这将 return 正确的数组。我们在模板中调用它。小心，如果可能的话，我绝不会建议在模板中调用函数。这会严重损害应用程序的性能。但是如果你在这个页面上没有太多内容，那么使用它是相当安全的。所以我建议如下：

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

并且该函数将 return 正确的数组：

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 有两个选项

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

how to do ngFor inside ngFor dynamically in angular 8?

arrays

angular

angular-material

ngfor