时间戳

首页 > 解决方案 > 如何预填充用作添加组件的属性的 Angular 7 菜单？

angular - 如何预填充用作添加组件的属性的 Angular 7 菜单？

问题描述

我正在使用 Angular 7。我定义了一个订单，src/app/order.ts，像这样

import { Product } from './product';

export class Order{
    public id:number;
    public reference:string;
    public product:Product;

}

我创建了一个添加订单组件，src/app/order-add/order-add.component.html，看起来像这样

<form (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label class="col-xs-4 control-label" for="orderProduct">Product: </label>
        <div class="col-xs-8">
              <select [(ngModel)]="order.product" name="orderProduct">
                <option *ngFor="let product of products; let i = index" [value]="products[i].id" [selected]="order !== 'undefined' && products[i].id == order.product.id">
                  {{products[i].name}}
                </option>
              </select>
        </div>

        <label class="col-xs-4 control-label" for="orderReference">Order Reference: </label>
        <div class="col-xs-8">
            <input type="text" style="width: 300px" class="form-control" required
                [(ngModel)]="order.reference" name="orderReference">
        </div>
        <div>
                <input type="submit" [value]="order.id !== undefined ? 'Update' : 'Create'" />
        </div>
    </div>
</form>

下面是我如何定义在 src/app/order-add/order-add.component.ts 中加载的内容...

...
export class OrderAddComponent implements OnInit {

  public order : Order = new Order();
  public products : Array<Product>;

  constructor(public apiService: ApiService , public acRoute : ActivatedRoute) { }

  ngOnInit() {
    // Get current products list for display on order form
    this.apiService.get("products").subscribe((data : Product[])=>{
      console.log(data);
      this.products = data;
    });

    // Get info about order
    this.acRoute.params.subscribe((data : any)=>{
      console.log(data.id);
      if(data && data.id){
        this.apiService.get("orders/"+data.id).subscribe((data : Order)=>{
          this.order = data;
        });
      }
      else
      {
        this.order = new Order();
      }
    })
  }

问题是，当我的页面最初加载时，我的下拉菜单中没有产品，直到我实际单击选择菜单并尝试加载某些内容。在完成任何操作之前，JS 控制台中会出现此错误...

ERROR TypeError: Cannot read property 'id' of undefined
    at Object.eval [as updateRenderer] (OrderAddComponent.html:6)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
    at checkAndUpdateView (core.js:13849)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callViewAction (core.js:14195)

如何确保我的菜单已预先填充，而无需单击 SELECT 菜单？

标签： angulardrop-down-menucomponentsangular7

解决方案

你的问题似乎在这里

<option *ngFor="let product of products; let i = index" [value]="products[i].id" [selected]="order !== 'undefined' && products[i].id == order.product.id">

您正在两个单独的异步调用中填充数据：

this.apiService.get("products")
this.apiService.get("orders/"+data.id)

因此，如果您的产品已加载并开始渲染，但您order.product仍然undefined在尝试获取其 id ( order.product.id) 时出现错误。

最快的解决方案是将其更改为order.product?.id，以便在加载订单之前不引发错误。

请让我知道它是否有帮助，或者您需要一些额外的支持、信息、示例等。

推荐阅读