1

我正在尝试使用 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>

父模板.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)
  }
}

子模板.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>

子模板.ts

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

  constructor() { }

  ngOnInit(): void {
  }

}
4

2 回答 2

0

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

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

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

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

c）如果上述方法均无效，请提供有关您在此处提到的错误的更多信息：“我已尝试使用属性绑定添加占位符，但导致错误。”。

于 2021-08-28T15:33:55.073 回答
0

我已经用下面的代码解决了这个问题，真正的独立显示了你在表单中需要的内在价值。

子模板.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>
于 2021-09-14T22:45:03.563 回答