为指令属性传递动态值得到未定义的Angular5

Question

使用 "@angular/core": "^5.0.1", "@angular/material": "^5.0.0-rc.1", "@angular/cdk" : "^5.0.0-rc.1".

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

静态输入如 qa-name="matselectone" for selector mat-select element Works Fine and XXXqaName attribute appeared in HTML 模板如：

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

当为 mat-options 添加 动态值时，例如 XXXqaName="data-{{ option.value }}" 输入未通过（即未定义）并且在 HTML 模板中找不到 XXXqaName 属性，例如

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

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

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

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

为指令属性传递动态值得到未定义的Angular5

Passing Dynamic value for directive attribute getting undefined Angular5

angular-directive

angular