как сделать ngFor внутри ngFor динамически в angular 8? - PullRequest
Новая
       9

как сделать ngFor внутри ngFor динамически в angular 8?

1 голос
/ 03 октября 2019

Привет, что я пытаюсь добиться, это 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>

iпопробуйте сделать цикл mat-select динамически, так как я хочу, чтобы он зацикливал массив с другим именем, мне нужно значение в массиве listModel для печати в * ngFor внутри mat-select. Что это за строка: 

            <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, таким как массивы.

что я пропустил?

1 Ответ

1 голос
/ 04 октября 2019

Вы можете отобразить это с помощью функции, которая будет возвращать правильный массив. Мы называем это в шаблоне. БУДЬТЕ ОСТОРОЖНЫ , я бы никогда не рекомендовал вызывать функцию в шаблоне, если это только возможно. Это может серьезно повредить производительности в приложении. Но если у вас мало контента на этой странице, его довольно безопасно использовать. Поэтому я хотел бы предложить следующее: 

<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 с обеими опциями

...