在Angular 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;
}

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