如何在Angular 5中显示数组

Question

我试图在Angular 5中将数组显示为列表，但是我的方法没用

eval

以及数组从何处获取值

<ul class="list-group">
  <li  *ngFor="let Flowwer of FlowwersBy" class="list-group-item" >
      {{ Flowwer }}
    </li>
  </ul>

Answer 1

使用带有* NgFor指令的异步管道会有所帮助，因为返回的数据是可观察到的，而不是array类型的属性。

Answer 2

最好使用异步管道和映射而不是Subscripe，如下所示：

HTML：

<ul class="list-group" *ngIf="(FlowwersBy | async) as flowers">
  <li  *ngFor="let Flowwer of flowers" class="list-group-item" >
  {{ Flowwer }}
  </li>
</ul>

组件：

ngOnInit() {
// Once component loads, get user's data to display on profile
 this.FlowwersBy = this.authService.getProfile()
 .map(profile=>profile.user.FlowwersBy)
}

Answer 3

尝试一下：

  <ul class="list-group">
    <li  *ngFor="let Flowwer of FlowwersBy; let i = index" class="list-group-item" >
      {{ Flowwer[i] }}
    </li>
  </ul>