使用typescript访问数组的第一项，但浏览器返回未定义的属性

我编写了一个

getFooterContent

方法，希望通过

getFooterContent

显示数据，但我有以下错误：

platformbrowser.umd.js:1900

原始异常：TypeError:无法读取的属性“内容” 未定义

还有我的html代码

<footer class="c-footer">
<div class="c-footer--service">
    <span>{{ footerContent[0].content}}</span>
    <span>{{ footerContent[1] }}</span>
</div>
<h1>{{ footerContent[2] }}</h1>
<div class="c-footer__version">
    <p>{{ footerContent[3] }}</p>
    <p>{{ footerContent[4] }}</p>
</div>

---

但我不知道为什么

footerContent[0]。content

返回未定义？

就像@JukkaL解释的那样

<template [ngIf]="footerContent">
  <footer class="c-footer">
  <div class="c-footer--service">
    <span>{{ footerContent[0].content}}</span>
    <span>{{ footerContent[1] }}</span>
  </div>
  <h1>{{ footerContent[2] }}</h1>
  <div class="c-footer__version">
    <p>{{ footerContent[3] }}</p>
    <p>{{ footerContent[4] }}</p>
  </div>
</template>

{{footerContent[0]。内容}
{{footerContent[1]}
{{footerContent[2]}
{{footerContent[3]}

{{footerContent[4]}

如@JukkaL所解释

<template [ngIf]="footerContent">
  <footer class="c-footer">
  <div class="c-footer--service">
    <span>{{ footerContent[0].content}}</span>
    <span>{{ footerContent[1] }}</span>
  </div>
  <h1>{{ footerContent[2] }}</h1>
  <div class="c-footer__version">
    <p>{{ footerContent[3] }}</p>
    <p>{{ footerContent[4] }}</p>
  </div>
</template>

{{footerContent[0]。内容}
{{footerContent[1]}
{{footerContent[2]}
{{footerContent[3]}

{{footerContent[4]}

您需要检查内容是否存在：

 <footer class="c-footer" *ngIf="footerContent.length > 4">
    <div class="c-footer--service">
        <span>{{ footerContent[0].content}}</span>
        <span>{{ footerContent[1] }}</span>
    </div>
    <h1>{{ footerContent[2] }}</h1>
    <div class="c-footer__version">
        <p>{{ footerContent[3] }}</p>
        <p>{{ footerContent[4] }}</p>
    </div>

{{footerContent[0]。内容}
{{footerContent[1]}
{{footerContent[2]}
{{footerContent[3]}

{{footerContent[4]}

您需要检查内容是否存在：

 <footer class="c-footer" *ngIf="footerContent.length > 4">
    <div class="c-footer--service">
        <span>{{ footerContent[0].content}}</span>
        <span>{{ footerContent[1] }}</span>
    </div>
    <h1>{{ footerContent[2] }}</h1>
    <div class="c-footer__version">
        <p>{{ footerContent[3] }}</p>
        <p>{{ footerContent[4] }}</p>
    </div>

{{footerContent[0]。内容}
{{footerContent[1]}
{{footerContent[2]}
{{footerContent[3]}

{{footerContent[4]}

您试图在加载内容之前显示内容。使用ngIf和一个布尔变量仅在加载内容后显示内容。是的，首先我也认为加载内容之前内容为null，我使用ngIf，但当我在ngIf中使用内容时，它仍然会打印错误，接下来我想拥有自己的属性，但它仍然不起作用，因此，我没有使用ngIfYou试图在加载内容之前显示内容。使用ngIf和一个布尔变量仅在加载内容后显示内容。是的，首先我还认为加载前内容为空，我使用ngIf，但当我在ngIf中使用内容时，它仍然会打印错误，接下来我想拥有自己的属性，但它仍然不起作用，所以我没有使用ngIf