angular - 我在 Angular for for 循环中创建了一个自定义指令。收到警告，“无法绑定到‘appNgLoopOf’，因为它不是‘p’的已知属性

Question

my-for.directive.ts

@Directive({
  selector: '[appMyFor]'
})
export class MyForDirective implements OnInit, OnChanges {

  @Input() appMyForOf: Array<any>;

  constructor(private temRef: TemplateRef<any>, private viewRef: ViewContainerRef) { }
  ngOnChanges(changes: import("@angular/core").SimpleChanges): void {

    for (const input of this.appMyForOf) {
      this.viewRef.createEmbeddedView(this.temRef, {
        $implicit: input,
        index: this.appMyForOf.indexOf(input),
      });
    }
  }
  ngOnInit(): void {
  }
}

我的观点如下：

d-test2.component.html

<p *appMyFor="let nr of numbers">
    {{ nr }}
</p>

组件看起来像：

d-test2.component.ts

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

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

  constructor() { }
  numbers = [1, 2, 3];

  ngOnInit(): void {
  }

}

所以这里的问题是d-test2.component.html中的段落元素没有在浏览器中呈现。在浏览器控制台中看到警告。

Answer 1

您必须在相应的模块中声明您的指令

@NgModule({
    declarations: [MyForDirective],
    exports: [MyForDirective] ...

如果要在此模块之外使用它，则必须将其导出。

您的选择器 ([appMyFor]) 也应该是您的输入装饰器：

@Input() appMyFor: Array<any>;