Angular6 / Typescript - Отображение объектов в массивах в массивах - PullRequest
Новая
       7

Angular6 / Typescript - Отображение объектов в массивах в массивах

0 голосов
/ 11 сентября 2018

У нас есть 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 и распечатал его детали. На данный момент моя веб-страница выглядит так: 

  - 1, 11, 12

Как реализовать детали, просто используя идентификаторы.

У меня уже есть метод "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}`))
 );
}

1 Ответ

0 голосов
/ 11 сентября 2018

Вы можете закинуть объект 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>

1012 * компонент *

  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) 
  }

демонстрация стекаблиц

если вы хотите отобразить имя элемента на кнопке печати, лучше сопоставить идентификатор с соответствующим объектом, как этот

компонент 

  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>

демонстрация стекаблиц

счастливое кодирование

...