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

【问题标题】：Angular/Typescript - Array of Objects of another Array ErrorAngular/Typescript - 另一个数组错误的对象数组
【发布时间】：2019-02-15 20:30:03
【问题描述】：

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

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 个不同对象的要点，但没有详细信息。您可能知道错误在哪里？重要的是在“fetches essensplan”中。

【问题讨论】：

试试这个.. {{essensplan.essenProWoche | json}}
它不起作用：/ @FintanKearney
this.essensplanService.getEssensplan() .subscribe(essensplan => this.essensplan = essensplan); } 它的正确值只需在控制台中打印并检查
见下面的答案。您没有在 ng-repeat 中引用 .EssenProWoche
@FintanKearney 看来你是对的

标签： javascript html arrays angular typescript

【解决方案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>

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

【讨论】：

我认为你是对的：恕我直言，subscribe(essensplan => this.essensplan = essensplan) 的部分引起了麻烦，因为本地的essensplan 与this.essensplan 相同。尽量避免使用局部变量并改用异步。
@mareks - 我们发现了问题，您帮助我们提出了重命名所有内容的建议。现在可以了。谢谢！

【解决方案2】：

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

【讨论】：

控制台说：EssensplanComponent.html:12 错误类型错误：无法读取未定义的属性“EssenProWoche”
您能否添加对此代码的解释，因为尚不清楚它是否/如何解决问题？谢谢！