为指令属性传递动态值获取未定义的Angular5

Question

使用“@angular/core”：“^5.0.1”、“@angular/material”：“^5.0.0-rc.1”、“@angular/cdk”：“^5.0.0-rc .1"。

我具有检查所有字段是否添加了 XXXqaName 属性的功能，因此添加了一个带有 @input 属性的指令，该指令接受 XXXqaName

选择器 mat-select 元素的静态输入，如 qa-name="matselectone" 工作正常，并且 XXXqaName 属性出现在 HTML 模板中，如：

<mat-select XXXqaName="matselectone"></mat-select> // Works fine

当添加 ma​​t-options 的动态值 像 XXXqaName="data-{{ option.value }}" 输入不是通过（即未定义）和 XXXqaName 属性在像

这样的 HTML 模板中找不到

<mat-option XXXqaName="data-{{ option.value }}"></mat-option> // XXXqaName missing in HTML template only ng-reflect name is present.

注意：option.value 存在，并且下拉列表中的选项值已填充，但 HTML 中缺少属性“xxxqaName”。

指令：

@Directive({
     selector: `input[type="text"], mat-select, mat-option`
 })
export class QaDirective implements OnInit {

   @Input('XXXqaName') qaName: string;

   constructor(private element: ElementRef) { }

   ngOnInit() { this.verifyQa();}

   verifyQa(): void {
   if (!this.qaName) {
   console.error('No "XXXqaName" provided for:',This.element.nativeElement);
   return;
   }
  }
}

为输入属性值传递动态值时的指令仍未定义。是否有其他方法可以将动态值传递给指令任何帮助都会很棒。

注意：可能看起来像Dynamic attribute values for directives，但它们使用组件中的函数来操作输入。这里略有不同，属性仍未定义。

Answer 1

更新

属性绑定不会添加到 DOM。 如果您希望绑定成为属性，请使用attr. 绑定

attr.XXXqaName="data-{{ option.value }}"

或

[attr.XXXqaName]="'data-' + option.value"

StackBlitz example

原创

当您检查尚未创建的属性时

改用ngAfterViewInit()

@Directive({
     selector: `input[type="text"], mat-select, mat-option`
 })
export class QaDirective implements OnInit {

   @Input('XXXqaName') qaName: string;

   constructor(private element: ElementRef) { }

  ngOnChanges() {
    this.verifyQaNameAttr();
  }

   verifyQa(): void {
   if (!this.qaName) {
   console.error('No "XXXqaName" provided for:',This.element.nativeElement);
   return;
   }
  }
}