Angular / Typescript-另一個數組錯誤的對象數組

Question

我們得到了一個由10個對象組成的“食物/埃森”數組。

Foodplan是“食物”數組和ID“周數”的8個對象組成的數組。

問題是，在我們的網絡應用程序中，該程序未打印詳細信息，但可以識別其8個對象。

class Essen {
    id: number;
    name: string;
    preis: number;
    art: string;
}

class Essensplan {
    Wochennummer: number;
    EssenProWoche: number[] = new Array(5);

"essen": [
{
  "id": 11,
  "name": "Kabeljaufilet",
  "preis": 3.55,
  "art": "mit Fisch"
},

"essensplan": [
{
  "Wochennummer": 1,
   "EssenProWoche": [
    11,
    12, 
    13
  ] 
},

essensplan.service.ts

/** GET ESSENSPLAN FROM THE SERVER */
getEssensplan(): Observable<Essensplan[]> {
    return this.http.get<Essensplan[]>(this.essensplanUrl)
        .pipe(
            tap(essensplanUrl => this.log('fetched essensplan')),
            catchError(this.handleError('getEssensplan', []))
        );
}

essensplan.component.ts

getEssensplan(): void {
    this.essensplanService.getEssensplan()
        .subscribe(essensplan => this.essensplan = essensplan);
}

essensplan.component.html

<ul class="essensplan">
    <li *ngFor="let essensplan of essensplan">
        <span class="badge">{{essensplan.wochennummer}}</span> 
        {{essensplan.essenProWoche}}
    </li>
</ul>

結果是，它僅顯示了陣列中8個不同對象的項目符號點，但沒有詳細信息。 您可能知道錯誤在哪里嗎？ 重要的是在“獲取essensplan”中。

Answer 1

首先，您要引用模板中以小寫字母開頭的鍵（wochennummer，essenProWoche），而實際數據結構中包含以大寫字母開頭的鍵（Wochennummer，EssenProWoche）。 這就是為什么模板不知道這些屬性的原因。

嘗試與您的屬性名稱保持一致，我建議使用以小寫字母開頭的CamelCase。 但當然是您的決定。

另一個建議是，研究異步以避免避免像essensplan這樣的本地變量。 它減少了樣板。

數據：

"essensPlan": [{
 "wochenNummer": 1,
 "essenProWoche": [
   11,
   12, 
   13
 ], 
},//...]

控制器：

// further up define essensPlan$ as Observable<Essensplan[]>
essensPlan$ = this.essensplanService.getEssensplan();

模板;

<li *ngFor="let essensPlanItem of essensPlan$ | async">
     <span class="badge">{{essensPlanItem.wochenNummer}}</span>
</li>

此外，我認為您的類實際上是接口； 不需要帶有新Array（5）的EssenProWoche。

Answer 2

<ul class="essensplan">
    <li *ngFor="let essensplan of essensplan.EssenProWoche">
        <span class="badge">{{essensplan.wochennummer}}</span>
        {{essensplan}}
    </li>
</ul>