Question

我在使用* ngFor在html端进行循环时出现了一些问题，从下面的REST服务收到的数据就是我正在做的事情：

  getQuestionaire(type: String) {
    const url = `${this.questionaireTypeUrl}/${type}`;
    return this.http.get(url).map(
      (response: Response) => {const questioniares: any[] = response.json();
        return questioniares;
      }
    );
  }

这里我在app.component.ts之一中调用该函数：

  ngOnInit() {
    this.route.params
    .subscribe(
      (params: Params) => {
        this.quesType = params['type'];
        this.questionaireService.getQuestionaire(this.quesType).subscribe(
          (questionaires: any[]) => {
            this.questionaire = questionaires;
            console.log(this.questionaire);
          }
        );
      }
    );
  }

这里我在html端使用* ngFor循环并动态创建表

<table class="table ">
      <thead>
        <tr>
          <th class="active">QUESTIONAIRE NAME</th>
          <th class="active">LEVEL</th>
          <th class="active">LAST MODIFIED</th>
          <th class="active">PUBLISHED BY</th>
          <th class="active">VALIDITY DATE</th>
        </tr>
      </thead>
      <tbody *ngFor="let questionaireEl of questionaire">
        <tr>
          <td>{{ questioniareEl.nameQuestionaire }}</td>
          <td>{{ questionaireEl.levelQuestionaire }}</td>
          <td>{{ questionaireEl.lastUser }}</td>
          <td>{{ questionaireEl.publishingUser }}</td>
         </tr>
      </tbody>
 </table>

问题：控制台记录我循环的数据，它包含一个对象数组，我无法弄清楚如何访问我需要显示的元素请帮助!! < / p>

Answer 1

您需要使用异步管道<tr *ngFor="let questionaireEl of questionaire | async">...

或者你可以写

<td>{{ questioniareEl?.nameQuestionaire }}</td>
<td>{{ questionaireEl?.levelQuestionaire }}</td>
...

避免错误

Answer 2

这里?.来救援

通常在异步调用发生时，您完全不知道何时会到达/到达模板。但另一方面，模板将被解析为HTML，并且它希望显示来自异步调用的尚未到达的数据。
因此，在数据返回之前，?.运算符会等待（并且不会抛出任何模板错误）。
数据到达后，?.运营商可以打印到达的数据。

例如

{{questioniareEl?.nameQuestionaire}}

角度4- * ng在对象阵列上不起作用

2 个答案: