如何在 angular 材料中绑定 mat-option

Question

嗨，我是 angular 的初学者，我想在 angular 材料中创建一个下拉列表并将其绑定到节点 js 中的数据源，我的 html 代码是：

<mat-form-field appearance="fill" class = "tp-full-width" >
     <mat-label>product desc</mat-label>
     <mat-select >
           <mat-option *ngFor="let p of list_product" [value]="p">
                          {{ p.id }}
             </mat-option>
      </mat-select>
</mat-form-field>

在 ts 中有以下代码：

export class BasicComponent implements OnInit, AfterViewInit {
    
  public list_product = new MatTableDataSource<any>([]);
  displayedColumns: string[] = ['id', 'description', 'action'];

  dataSource=this.list_product;

ngOnInit(): void {
      this.get_data();
  }

  get_data(){
           this.http.get<any>("http://localhost:3000/listp").subscribe(
          res => this.list_product.data = res                 //fill list_product from nodejs server address
      );
  }

但我的下拉列表没有显示任何列表项

Answer 1

this.list_product.data = res但在 html “让 list_product 的列表”？，这是错误的。 请确保 list_product 的值是一个数组

Answer 2

您应该遍历数组值 list_product.data

<mat-form-field appearance="fill" class = "tp-full-width" >
     <mat-label>product desc</mat-label>
     <mat-select >
           <mat-option *ngFor="let p of list_product.data" [value]="p">
                          {{ p.id }}
             </mat-option>
      </mat-select>
</mat-form-field>