Angular2 * ng不显示数组数据

时间:2018-04-12 03:40:26

标签: angular ngfor

我正在使用Angular 5并进行速成课程。我实际上比使用ngFor指令更进一步,但我正在做一部分练习作业,而我尝试做的第一件事就是不会循环显示数据。我还有其他项目在哪里工作,但这个没有,我感到很困惑。知道它是愚蠢的东西。

组件

componentDidMount = () => {
  this.timerID = setInterval(
    () => this.tick(),
    10000
  );
}

componentWillUnmount = () => {
  clearInterval(this.timerID);
}

//Get new time stamp
tick = () => {
  this.setState({
    date: new Date(),
    //battery: new taobot_voltage_listener()
  });
}

HTML模板

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具有内容将会发生的地方,但我并不知道这究竟意味着什么。

感谢

2 个答案:

答案 0 :(得分:2)

您需要指定数组值

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

<强> DEMO

答案 1 :(得分:0)

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

此代码中的数组分配错误。

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

数组赋值应为:

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

more details