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

Question

我用的是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();
      }
    })
  }

问题是，当我的页面最初加载时，在我实际单击 select 菜单并尝试加载某些内容之前，我的下拉列表中没有任何产品。 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 菜单？

Answer 1

你的问题好像出在这里

<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，以免在加载订单之前引发错误。

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

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

How do I pre-populate an Angular 7 menu used as an attribute of adding a component?

components

drop-down-menu

angular

angular7