Html 错误类型错误：无法读取属性'；说明'；角度模板中未定义的

这是我的服务

getCADataService() : Observable<Currentaffairs[]>{
    return this.httpClient.get<Currentaffairs[]>(`${this.url}/sports`);
   }

这是我的模板：

  <ul>
            <li *ngFor="let ca of currentAffairs | keyvalue">
              <md-card class="example-card">
                <md-card-header>
                    {{ca.articles.description}}
                </md-card-header>
                <img md-card-image src="">
                <md-card-content>
                  <p>
                      
                  </p>
                </md-card-content>
                <md-card-actions>
                  <button md-button>Approve</button>
                  <button md-button>Reject</button>
                </md-card-actions>
              </md-card>
            </li>
        </ul>

{{ca.articles.description}


批准
拒绝

---

在UI中显示数据时，我遇到以下错误：

根据您提供的http响应，您似乎应该首先迭代

文章

数组或将GET响应映射到文章

现在，您正试图在此处访问数组的属性

{{ca.articles.description}

，该属性没有多大意义

一个可行的办法是调整这一方法

getCAdata() {
    this.dataservice.getCADataService()
      .pipe(map((response) => response.articles));
      .subscribe(currentAffairs =>
      this.currentAffairs = currentAffairs
    )
}

因此，

this.currentAffairs

本身就是一个数组

aricles

，然后您可以删除

keyvalue

管道并以这种方式更改模板

<md-card-header>
  {{ca.description}}
</md-card-header>

{{ca.description}}

根据您提供的http响应，您似乎应该首先迭代

文章

数组或将GET响应映射到文章

现在，您正试图在此处访问数组的属性

{{ca.articles.description}

，该属性没有多大意义

一个可行的办法是调整这一方法

getCAdata() {
    this.dataservice.getCADataService()
      .pipe(map((response) => response.articles));
      .subscribe(currentAffairs =>
      this.currentAffairs = currentAffairs
    )
}

因此，

this.currentAffairs

本身就是一个数组

aricles

，然后您可以删除

keyvalue

管道并以这种方式更改模板

<md-card-header>
  {{ca.description}}
</md-card-header>

{{ca.description}}

为此，您可以使用

html

模板中的

？

值将其定义为安全导航操作符，因为加载可观察对象的组件仍在运行，因此返回为

未定义



{{ca.articles？.description}}


批准
拒绝


为此，您可以使用
html
模板中的
？
值将其定义为安全导航操作符，因为加载可观察对象的组件仍在运行，因此返回为
未定义



{{ca.articles？.description}}


批准
拒绝


postman{“status”：“ok”，“totalResults”：67，“articles”：[{“source”：{“id”：“espn cric info”，“name”：“espn cric info”}，“作者”：“Umar”，“头衔”：“PCB主席Ehsan”，“描述”：“\“从法律和宪法上讲，我们有权参加比赛，任何人都不能将我们从比赛中除名\”，在调用
getCAdata
之前，什么是
currentAffairs
设置为？我猜模板正在试图在订阅完成之前呈现。您可以添加一个*ngIf以在对象有数据之前不显示此列表，或者尝试将其设置为空数组（尽管我认为您会得到不同的错误）投递员{“状态”：“ok”，“totalResults”：67，“文章”：[{“来源”：{“id”：“espn cric信息”，“姓名”：“espn cric信息”}，作者“：“Umar”，“title:“PCB主席Ehsan”，“description:”“从法律和宪法上讲，我们有权参加比赛，任何人都不能将我们从比赛中除名\”，在调用
getCAdata
之前，什么是
currentAffairs
设置为？我猜模板正在试图在订阅完成之前呈现。您可以添加一个*ngIf以在对象有数据之前不显示此列表，或者尝试将其设置为空数组（尽管我认为您会得到不同的错误）