如何在Angular Material子组件输入表单中展示父级对象详情

我尝试在Angular Material子组件的表单输入字段中展示父组件表格传递的对象数据，但输入框没有显示对象值，只能展示我创建的<mat-label>内容。我尝试通过属性绑定添加占位符还触发了报错。

相关代码 #

父组件模板 parent-template.html #

<table class="mat-elevation-z8 table table-primary table-striped overview-no-margin">
  <thead>
  <tr>
    <th scope="col">Product Tag</th>
    <th scope="col">Product Status</th>
  </tr>
  </thead>
  <tbody>
  <tr (click)="onSelect(product)"
      [class]="selectedProduct === product ? selectedProduct : null"
      *ngFor="let product of products">
    <td>{{product.tag}}</td>
    <td>{{product.status}}</td>
  </tr>
  </tbody>
</table>

<button (click)="addRandomProduct()" class="addProduct btn-lg btn-primary">Add Product</button>
<app-product-detail [showProductDetail]="selectedProduct"></app-product-detail>

父组件逻辑 parent-template.ts #

export class ProductEditComponent implements OnInit {
  public selectedProduct?: Product;
  public products?: Product[];
  // public  defaultRow?:number = 8;

  constructor() { }

  ngOnInit(): void {

    this.products = [];
    for (let i = 0; i < 8; i++){
      this.addRandomProduct();

    }
  }

  public onSelect(product: Product): void{
    this.selectedProduct = product;
    console.log(product)
  }
}

子组件模板 child-template.html #

<div *ngIf="showProductDetail" id="product-detail">
      <form class="product-detail-panel mat-elevation-z8" >
        <div id="detail-header">
          <span><b>Update scooter </b></span><u>{{showProductDetail.tag}}</u><b> with scooter ID: </b> <u>{{showProductDetail.id}}</u>
        </div>
        <hr>
        <mat-form-field class="product-tag" appearance="fill">
          <mat-label>Tag:</mat-label>
          <input matInput [(ngModel)]="showProductDetail.tag" >
        </mat-form-field>
        <mat-form-field class="product-status" appearance="fill">
          <mat-label>Product Status:</mat-label>
          <mat-select [(ngModel)]="showProductDetail.status" >
            <mat-option value="STOCK">STOCK</mat-option>
            <mat-option value="OUT OF STOCK">OUT OF STOCK</mat-option>
            <mat-option value="COMING SOON">COMING SOON</mat-option>
            <mat-option value="NOT DELIVRABLE">NOT DELIVRABLE</mat-option>
            <mat-option value="ON SALE">ON SALE</mat-option>
          </mat-select>
        </mat-form-field> 
</div>

子组件逻辑 child-template.ts #

export class ProductDetailComponent implements OnInit {
  @Input() panelMessage = 'Select a product from the left panel:';
  @Input() showProductDetail?: Product;

  constructor() { }

  ngOnInit(): void {
  }

}

核心问题是你在Angular模板驱动表单中使用ngModel双向绑定，但没有遵守模板驱动表单的规则，按以下步骤修改即可：

1. 给使用ngModel的表单控件添加唯一name属性，这是模板驱动表单的强制要求：

<mat-form-field class="product-tag" appearance="fill">
  <mat-label>Tag:</mat-label>
  <input matInput [(ngModel)]="showProductDetail.tag" name="productTag">
</mat-form-field>
<mat-form-field class="product-status" appearance="fill">
  <mat-label>Product Status:</mat-label>
  <mat-select [(ngModel)]="showProductDetail.status" name="productStatus">
    <!-- 原有选项代码保持不变 -->
  </mat-select>
</mat-form-field>

如果你不需要Angular的表单自动校验和管理逻辑，也可以直接给form标签添加ngNoForm属性，跳过表单默认处理，就不需要强制添加name属性：

<form class="product-detail-panel mat-elevation-z8" ngNoForm>

2. 额外优化：你父组件中表格行的class绑定逻辑错误，目前直接把product对象赋值给了class属性，应该修改为绑定指定的选中样式类：

<tr (click)="onSelect(product)"
    [class.selected]="selectedProduct === product"
    *ngFor="let product of products">

之后在对应的样式文件中定义.selected类的选中效果即可。

内容的提问来源于stack exchange，提问作者Sick1Webby