如何使用 Angular Material 在 child 输入表单中显示 parent object 的详细信息？

Question

我正在尝试在带有 Angular Material 的 child 表单输入字段中显示来自 parent table 的 object。但它不会在输入字段中显示 object 值。它只显示我创建的 <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 {
  }

}

Answer 1

这可能是一个棘手的问题，因为您的代码中的逻辑是正确的。但是让我们试试这个：

a) 在您的 child-template.html 代码中，标签没有结束对。添加它，看看它是否解决了问题。

b) 确保您拥有所有需要的模块导入，例如

import {MatInputModule} from '@angular/material/input';
import {MatSelectModule} from '@angular/material/select';

c) 如果上述工作 none，请提供有关您在此处提到的错误的更多信息：“我已尝试使用属性绑定添加占位符，但结果出错。” .

Answer 2

我已经用下面的代码解决了这个问题，真正的单机版以一种形式显示了你需要的内在价值。

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 class="product-tag">{{showProductDetail.tag}}</u><b> with scooter ID: </b><u id="product-id">{{showProductDetail.id}}</u>
        </div>
        <hr>
        <mat-form-field class="product-tag" appearance="fill">
          <mat-label>Tag:</mat-label>
          <input matInput [(ngModel)]="showProductDetail.tag" [ngModelOptions]="{standalone: true}">
        </mat-form-field>
        <mat-form-field id="product-status" appearance="fill">
          <mat-label>Product Status:</mat-label>
          <mat-select [(ngModel)]="showProductDetail.status" [ngModelOptions]="{standalone: true}">
            <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>

如何使用 Angular Material 在 child 输入表单中显示 parent object 的详细信息？

How can I display the details from a parent object in a child input form with Angular Material?

angular

typescript

angular-material

mat-form-field

angular-input