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

Question

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

我已经尝试了多种方法来提取属性，包括以下内容

element.dataset [keyname]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首先显示数据绑定属性并设置指令/组件的输入属性后，初始化指令/组件。在第一个ngOnChanges（）之后调用一次。

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

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

请参阅下面的示例。

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']);
  }
}

输出日志