Angular2 *ng用于不显示数组数据

Question

我正在使用 Angular 5 并参加速成班。实际上，我已经不仅仅是使用 ngFor 指令了，但我正在做练习作业的一部分，我尝试做的第一件事就是不会循环显示数据。我还有其他项目可以正常工作，但这个项目没有，我很困惑。知道这是愚蠢的事情。

组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  subscriptions: ['Basic', 'Advanced', 'Pro'];
}

HTML 模板

<div class="container">
  <div class="row">
    <div class="col-xs-12>
      <p *ngFor="let subscription of subscriptions">{{subscription}}</p>
    </div>
  </div>
</div>

简单吧？我实际上是将它放入 select 输入的选项元素中，但这不起作用，所以我想我会尝试更简单的方法，但它仍然不起作用。结果 html 有这个内容的去向，但我还不够精通，不知道这到底是什么意思。

谢谢

Answer 1

您需要给数组赋值

 subscriptions =  ['Basic', 'Advanced', 'Pro'];

DEMO

Answer 2

您可以在Angular中使用*ngFor显示列表中的每个数组数据。

您的代码中的数组赋值错误。

export class AppComponent {
  subscriptions: ['Basic', 'Advanced', 'Pro'];
}

数组分配应该是：

export class AppComponent {
  subscriptions =  ['Basic', 'Advanced', 'Pro'];
}

more details

Angular2 *ng用于不显示数组数据

Angular2 *ngFor not displaying array data

ngfor

angular