代码之家 › 专栏 › 技术社区 › Bailey Miller

角度6*ngfor directive不工作

angular-directive angular

Bailey Miller · 技术社区 · 8 年前

我刚刚在将cli升级到v6之后创建了一个新项目,并使用angular material util添加了仪表板布局。

我只是胡闹,意识到ngfor不适合我。

我确保了commonmodule被导入,我检查了其他指令是否像 *ngIf . 我是做错了什么,还是更新后坏了什么?

测试组件:

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  topics: ['C','C#']

  constructor() { }

  ngOnInit() {
  }

}

Html:

<div>
  <p>Topics</p>
  <ul>
    <li *ngFor="let topic of topics">{{topic}}</li>
  </ul>
</div>

我刚把我的应用程序测试组件放在仪表板快速启动构建的卡中,下面是呈现的内容。

截图:

ng—版本:

2 回复 | 直到 8 年前

Ramesh Rajendran 8 年前

已声明变量,但未对其进行初始化。试试这个

export class TestComponent implements OnInit {

    topics: [] = ['C','C#']

      constructor() { }

      ngOnInit() {
      }

    }

说明:

topics: ['C','C#'] 在这段代码中,typescript是如何处理它的。 ['C','C#'] 是的数据类型 topics

topics :[]= ['C','C#']

manish kumar 8 年前

您正在声明话题而不是初始化它

尝试

测试组件

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  topics: string[]

  constructor() { 
      this.topics=['C','C#'];
  }

  ngOnInit() {}

}

推荐文章

Kael · 在html表格中显示关系api数据-角度

3 年前

Ajith · 如何在angularjs4中触发另一个组件的点击事件函数

8 年前

krv · 使用父对象上的指令获取嵌套元素

8 年前

MHOOS · 使用md列表项设置角度材质接触表单的样式

8 年前

Petya Naumova · 如何从内部使用部分指令的组件访问DirectivesModule?

8 年前

zb22 · 带表格的角度指令

8 年前

AndreaNobili · 这个Angular 2自定义指令是如何工作的?

8 年前

Milan Kamilya · 无法从组件调用模型类的方法。angular2中的html

8 年前

Rhushikesh · 如何在angularjs中测试指令是否加载

9 年前

Kangze Huang · ES6玩得很好。如何使用它。没有controllerAs的角度指令内的someFunction()?

10 年前