javascript - Angular/Typescript - 另一个数组错误的对象数组

Question

我们得到了一个数组“food/essen”，它由 10 个对象组成。

Foodplan 是一个由数组“Food”和 ID“Weeknumber”组成的 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 个不同对象的要点，但没有详细信息。您也许知道错误在哪里吗？重要的是在“fetches essensplan”中。

Answer 1

首先，您在模板中引用以小写字母开头的键(wochennummer、essenProWoche)，而在实际数据结构中包含以大写字母开头的键(Wochennummer、EssenProWoche)。这就是模板不知道这些属性的原因。

尽量与您的属性名称保持一致，我建议使用以小写字母开头的 CamelCase。但当然这是你的决定。

另一个建议，研究 async 以避免出现像 essensplan 这样的本地变量。它减少了样板代码。

数据:

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

Controller :

// 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>

此外，我认为你的类实际上是接口(interface)；不需要使用 new Array(5) 来新建 EssenProWoche。