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>

如何正确执行此操作？

更新后的问题用艾哈迈德注释更新我的代码后，我的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

如何在角度8中动态执行ngFor内的ngFor？

1 个答案: