angular - 使用 *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 的更多信息

Answer 2

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

使用这个 =>

* ngFor="让列的列"