Arrays 如何在angular 8中动态执行ngFor内部ngFor？

嗨，我想实现的是在ngFor中具有动态值的ngFor，这可能吗？我也尝试在它里面使用ngModel，但没有成功。以下是我的工作：

在my 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);
  }

}

从'@angular/core'导入{Component，OnInit}；
从“@angular/cdk/drag drop”导入{CdkDragDrop，moveItemInArray}；
导出接口条件{
值：字符串；
viewValue:字符串；
}
导出接口ListProduk{
值：字符串；
viewValue:字符串；
}
导出接口DragBox{
值：字符串；
viewValue:字符串；
}
导出接口列表模型{
值：字符串；
viewValue:字符串；
单个_项：字符串；
}
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.scss']
})
导出类HomeComponent实现OnInit{
条件：条件[]=[
{value:'if'，viewValue:'if'}，
{value:'else'，viewValue:'else'}，
{value:'then'，viewValue:'then'}，
{value:'if-else'，viewValue:'if-else'}，
{value:'或'，viewValue:'或'}，
{value:'和'，viewValue:'和'}
];
listProduks:ListProduk[]=[
{value:'mcm-508'，viewValue:'mcm-508'}，
{value:'bl-100pl'，viewValue:'bl-100pl'}，
{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'，单个项目：'Condition'}，
{value:'listProduks'，viewValue:'listProduk'，单个项目：'listProduk'}，
]
构造函数（）{}
恩戈尼尼特（）{
}
drop（事件：CdkDragDrop）{
moveItemInArray（this.listModels、event.previousIndex、event.currentIndex）；
}
}

然后是my 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>

家庭作业

选择{{listModel.value}}：
测试
向右箭头

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

            <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>

家庭作业

选择{{listModel.value}}：
{{a.viewValue}}
向右箭头

这给了我一个这样的错误：

<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>

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

---

我遗漏了什么？

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

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

---

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

ngOnInit（）{
this.listModels.forEach（x=>{
x、 customArray=此[x.value]
})
}

并像在

*ngFor

中的正常迭代一样使用它：

---

这里有一个两个选项都有的例子

我刚才回答了类似的问题，那就是递归原则。这是一个链接，在cas中可能会有所帮助：您对第二个循环有问题，您应该使用不带括号的循环<代码>测试@AhmedEl sayed在我尝试之后，我得到了如下错误：错误错误：找不到类型为“string”的不同支持对象“conditions”。NgFor只支持绑定到数组等可重用项。@KeVin，这意味着您的响应数组不是有效的JSON值，请检查“listModel.value”的值。该值是条件，当我用“conditions”字符串替换listModel.value时，没有什么不同，但当用listModel.value打印时，为什么说它是一根绳子？谢谢，它起作用了！我选择第二种方式，修改模型。感谢stackblitz，这帮了大忙。我发现模型属性写得像customArray？：any[]里面有“？”问号，“？”有什么意思？@KeVin good choice！：）

customArray？

意味着它是一个可选属性，因此如果您要在

ListModel

中键入某个对象，如果没有该属性，编译器不会抱怨它丢失了。而且我很懒，在那里使用

any[]

。你真的应该做点像

customArray？：ListProduk[]| DragBox[]| Condition[]

这意味着

customArray

是这两种模型中的任何一种。我还认为，所有这些模型都是相同的，因此理论上，你可以只拥有一个模型，涵盖所有三种模型，而不是拥有三种不同名称的相同模型。但这只是一个细节：）