Question

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

感谢

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不显示数组数据

2 个答案: