使用 *ngFor 将数据传递给 mat-dialog

Question

我正在尝试使用 *ngFor 显示传递给对话框组件的数据。我正在传递这样的数据

const columnNames=['firstName', 'lastName','userName'];
    this.dialog.open(DatatableAdvancedSearchComponent,{
          width: '250px',
          data: {columnNames:columnNames}
    });

我正在尝试在对话框组件中访问它们 1.view 页

<div class="row">
 <select class="form-control">
 <option *ngFor="let column in columns" value="{{column}}">{{column}}</option>
 </select>
{{data.columnNames}}
{{columns}}
</div>

2.ts 页

 columns=[];
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    
    this.columns=this.data.columnNames;
   }

我得到了

的输出

{{data.columnNames}}
{{columns}}

但不适用于 select 语句。 select 未填写选项。如您所见，下面填充了相同的列，但为什么不在 select 语句中。请有任何建议。

Answer 1

当您使用集合的值进行迭代时，它应该是 'of' 而不是 in。

<select class="form-control">
 <option *ngFor="let column of columns" value="{{column}}">{{column}}</option>
 </select>

您可以阅读更多关于 ngFor 的详细信息here

Answer 2

您的 *ngFor 语句不正确，因为您使用的关键字是 "in" 而不是 "of"

使用这个=>

*ngFor="列中列"

使用 *ngFor 将数据传递给 mat-dialog

Getting data passed to a mat-dialog using *ngFor

angular

ngfor

mat-dialog