Question

Angular新手在这里。因此，我在过去几个小时内一直在努力实现动态创建标签的功能。我开始使用材料设计，但我仍然无法做到这一点，无法弄清楚我犯了哪个错误。

按下添加标签按钮时没有任何反应。此外，添加或删除ngOnInit中的选项卡添加不会做任何事情。很明显，我错过了一些东西...... 有什么帮助吗？

tabs.ts

import {Component, OnInit} from '@angular/core';
import {Tab} from "./tab";

@Component({
  selector: 'tabs',
  template: `<md-tab-group>  <md-tab ng-repeat="tab in tabs"
              label=TEST>
</md-tab>
</md-tab-group>
<button (click)="addTab()">Add new tab</button>`,
})
export class Tabs implements OnInit {

  tabs: Tab[] = [];

  ngOnInit(): void {

  }

  addTab() {
    var tab = new Tab();
    this.tabs.push(tab)
  }
}

tab.ts

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

@Component({
  selector: 'tab',
  template: `<products></products>`,
})
export class Tab {

}

app.ts

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

@Component({
  selector: 'my-app',
  template: `<tabs></tabs>`,
})
export class AppComponent {
}

Answer 1

你必须使用* ngFor而不是ng-repeate

你的模板代码应该是这样的

<md-tab-group>  <md-tab *ngFor="let tab of tabs" label=TEST> </md-tab>
</md-tab-group>
<button (click)="addTab()">Add new tab</button>

在{2}中的ngFor而不是ng-repeat。

Answer 2

请看看这个plunker：https://plnkr.co/edit/vsONc35ucEr8e7M4WysH?p=preview

除了Pradeep所说的，当你点击addnew按钮时，你可能会遇到一些BrowserAnimationsModule错误。请参阅Navigation Error in angular2以解决此问题。我本来可以证明这一点，但在plunker中遇到了一些问题。

Angular2材质设计动态标签

2 个答案: