如何使用指令时，您有内联模板在角6组件？

Question

我有一个简单的角组件(web )，它没有使用单独的带有模板的.html文件，而是将html标记内联写入，如下所示：

import {
  Input,
  Component,
  ViewEncapsulation,
  EventEmitter,
  Output
} from '@angular/core';

const heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

@Component({
  selector: 'custom-button',
  template: `
  <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>
  `,
  styles: [
    `
    button {
      border: solid 3px;
      padding: 8px 10px;
      background: #bada55;
      font-size: 20px;
    }
  `
  ],
  encapsulation: ViewEncapsulation.Native
})
export class ButtonComponent {
  @Input() label = ' label';
  @Output() action = new EventEmitter<number>();
  private clicksCt = 0;

  handleClick() {
    this.clicksCt++;
    this.action.emit(this.clicksCt);
  }
}

然后，我使用这个组件作为自定义元素，在index.html文件中显示它。问题是，当我打开应用程序时，没有呈现我的任何内容。相反，我将其置于检查模式中：

​

​

如果删除ngFor指令，静态内容就会呈现得很好。问题是，当我使用指令仅通过数组列出时。

有什么问题吗？

Answer 1

const heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

需要添加到ButtonComponent类的属性中：

export class ButtonComponent {
  ...

  heroes: string[] = heroes;
}

除非使全局和导入成为属性，否则它们不能用于组件的绑定上下文。