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的列表并附加click事件，以通过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

快乐的编码

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

1 个答案: