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

Question

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

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

像qa-name = “matselectone”的静态输入，用于选择器mat-select元素Works Fine和XXXqaName属性出现在HTML模板中，如：

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

为mat-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;
   }
  }
}