Angular6/Typescript - 数组中对象的映射

Question

我们有 2 个数组 speisekarte（10 个对象）和 essensplan（8 个对象）

const speisekarte = [
  { id: 11, name: 'Kabeljaufilet', preis: 3.55, art: 'mit Fisch' },
  { id: 12, name: 'Spaghetti Bolognese', preis: 3.85, art: 'mit Fleisch' },

const essensplan = [
  { id: 1, essenProWoche: [11, 12] },

我希望 essensplan 从 speisekarte 调用 ID 并打印出它的详细信息。目前，我的网页是这样的：

  - 1, 11, 12

如何仅使用 ID 来实现细节。

我已经有一个用于一个对象的详细信息页面的“EssenID”方法，但我不知道如何将它用于这种类型的数组。

/** GET essen by ID. Will 404 if id not found */
getEssen(id: number): Observable<Essen> {
  const url = `${this.speisekarteUrl}/${id}`;
  return this.http.get<Essen>(url).pipe(
    tap(_ => this.log(`fetched essen id=${id}`)),
    catchError(this.handleError<Essen>(`getEssen id=${id}`))
 );
}

Answer 1

您可以循环抛出essensplan对象然后循环抛出essenProWoche的列表并附加点击事件以通过essenProWoche列表获取选定的对象。

模板

<p>List of  essensplan </p>
<div *ngFor="let i of essensplan"> 
  <div>essensplan : {{i.id}}</div>
   <button *ngFor="let id of i.essenProWoche" (click)="print(id)">Ptint Item {{id}} </button>
</div>

<div>
  <p>Selected Item</p>
  {{selectedItem | json}}
</div>

组件

  speisekarte = [
    { id: 11, name: 'Kabeljaufilet', preis: 3.55, art: 'mit Fisch' },
    { id: 12, name: 'Spaghetti Bolognese', preis: 3.85, art: 'mit Fleisch' }
  ]

  essensplan = [
    { id: 1, essenProWoche: [11, 12] }
  ]


  selectedItem

  print(id: number) {
     this.selectedItem = this.speisekarte.find(i => i.id == id) 
  }

stackblitz demo

如果您想在打印按钮上显示项目名称，最好将 id 映射到像这样的相关对象

组件

  speisekarte = [
    { id: 11, name: 'Kabeljaufilet', preis: 3.55, art: 'mit Fisch' },
    { id: 12, name: 'Spaghetti Bolognese', preis: 3.85, art: 'mit Fleisch' }
  ];

  essensplan : {id:number,essenProWoche:any[]}[] = [
    { id: 1, essenProWoche: [11, 12] },
  ];


  selectedItem;

  ngOnInit() {
    this.essensplan.forEach(item => {
      item.essenProWoche = item.essenProWoche.map( id => {
        
        return  this.speisekarte.find(i => i.id == id) ;
      })
    })
  }
  print(item: number) {
     this.selectedItem = item;
  }

模板

<p>List of  essensplan </p>
<div *ngFor="let i of essensplan"> 
  <div>essensplan : {{i.id}}</div>
   <button *ngFor="let item of i.essenProWoche" (click)="print(item)">Ptint Item => {{item.name}} </button>
</div>

<div>
  <p>Selected Item</p>
  {{selectedItem | json}}
</div>

stackblitz demo

快乐编码