无法从 Angular 7 中的数据属性中提取数据

Question

我正在尝试重用 kendoDropDownListBox 并通过使用父级中的数据属性来查询正确的数据源并结合 switch case 语句来设置数据。代码的开关盒部分不包括在内，因为它在将正确的数据传递给它时起作用，我只是无法从数据属性中提取正确的数据（如果我使用按钮传递数据，它工作正常）

我尝试了多种方法来拉取属性，包括以下

element.dataset[键名] element.getAttribute('keyname']

如果我执行 console.log('element') 我可以看到正确的数据，但是上述两种方法中的任何一种都为空（null 或 undefined）。

HTML:

<div [attr.data-message-id]="1">  Listbox Component  
  <app-listbox></app-listbox>
</div>

打字稿：

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

@Component({
  selector: 'app-listbox',
  styleUrls: ['./listbox.component.scss'],
  template: `
  <kendo-dropdownlist style="width:400px;"
      [data]="data"
      [filterable]="true"
      [textField]="'text'"
      [valueField]="'value'"
      (filterChange)="handleFilter($event)"
  >
      <ng-template kendoDropDownListNoDataTemplate>
        <div>
            No data found.
            <ng-container *ngIf="filter">Do you want to add new item - '{{ filter }}' ?</ng-container>
            <br />
            <button *ngIf="filter" class="k-button" (click)="addNew()">Add new item</button>
        </div>
      </ng-template>
  </kendo-dropdownlist>
`

})
export class ListboxComponent {

  public filter: string;

      public source: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
      ];

  public data: Array<{ text: string, value: number }>;

  messages = [
    {
      id: 1,
      text: "Table1"
    },
    {
      id: 2,
      text: "Table2"
    },
    {
      id: 3,
      text: "Table3"
    },
    {
      id: 4,
      text: "Table4"
    }

  ]

  Table1 = [
    { id: 1, text: "small"},
    { id: 2, text: "med"},
    { id: 3, text: "large"},
    { id: 4, text: "XL"},
  ]

  Table2 = [
    { id: 1, text: "ford"},
    { id: 2, text: "dodge"},
    { id: 3, text: "chevy"},
    { id: 4, text: "GM"},
  ]

  Table3 = [
    { id: 1, text: "fiat"},
    { id: 2, text: "audi"},
    { id: 3, text: "Mercedes"},
    { id: 4, text: "BMW"},
  ]

  Table4 = [
    { id: 1, text: "toyota"},
    { id: 2, text: "nissan"},
    { id: 3, text: "datsun"},
    { id: 4, text: "kia"},
  ]


  constructor(private elRef: ElementRef) {
      this.data = this.source.slice(0);
  }

  public addNew(): void {      
    this.source.push({
      text: this.filter,
      value: 0
    });      
    this.handleFilter(this.filter);
  }

  public handleFilter(value) {
      this.filter = value;
      this.data = this.source.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1);
  }


  ngOnInit() {
    console.log("OnInit");

    console.log("el");
    var el = this.elRef.nativeElement.parentElement.dataset;
    console.log(el);

    console.log("elatt");
    var elatt = this.elRef.nativeElement.parentElement.attributes;
    console.log(elatt);

    console.log("elkey");
    var elkey = this.elRef.nativeElement.parentElement.dataset['messageId'];
    console.log(elkey);

    console.log("att");
    var att = this.elRef.nativeElement.parentElement.getAttribute(['data-message-id']);
    console.log(att);


  }

}

使用上面的代码，el变量包含以下内容： enter image description here

elatt 变量包含以下内容： enter image description here

elkey 变量报告 "undefined" 和 att 变量报告 "null"。

我确定我这样做可能很困难，但作为 Angular 的新手，我不确定是否有更好的方法。

最终我正在寻找的是一种将 kendoDropdownBox 作为组件重用的方法，并在使用时将需要显示的数据传递给它。

Answer 1

ngOnInit() : 在 Angular 之后初始化 directive/component 首先显示数据绑定属性并设置 directive/component 的输入属性。在第一个 ngOnChanges() 之后调用一次。

ngAfterViewInit() : 在 Angular 初始化组件的视图和子视图/指令所在的视图后响应。在第一个 ngAfterContentChecked() 之后调用一次。

您无法从父级检索数据属性，因为您正在尝试从 ngOnInit 事件访问父级。它应该在 ngAfterViewInit 生命周期事件中。

参考下面的例子。

ParentComponent.html

<div [attr.data-message-id]="1">
  <app-test-component></app-test-component>
</div>

ChildComponent.ts

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

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

  constructor(private elRef: ElementRef) {
  }


  ngOnInit() {
  }

  ngAfterViewInit(){

    console.log(this.elRef.nativeElement.parentElement);

    console.log('message id : ', this.elRef.nativeElement.parentElement.dataset['messageId']);
  }
}

输出日志

无法从 Angular 7 中的数据属性中提取数据

Unable to pull data from a data-attribute in Angular 7

javascript

angular

typescript

angular7

custom-data-attribute