無法從 Angular 7 中的數據屬性中提取數據

Question

我正在嘗試重用 kendoDropDownListBox 並通過使用父級中的數據屬性來查詢正確的數據源並結合 switch case 語句來設置數據。 代碼的開關盒部分不包括在內，因為它在將正確的數據傳遞給它時工作，我只是無法從數據屬性中提取正確的數據（如果我使用按鈕來傳遞數據它工作正常）

我嘗試了多種方法來提取屬性，包括以下

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

如果我執行 console.log('element') 我可以看到正確的數據，但上述兩種方法中的任何一種都為空（null 或未定義）。

HTML：

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

Typescript：

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 變量包含以下內容：在此處輸入圖像描述

elkey 變量報告“未定義”，att 變量報告“null”。

我確定我可能會以艱難的方式做到這一點，但是對於 Angular 來說是新手，我不確定是否有更好的方法來做到這一點。

最終，我正在尋找一種將 kendoDropdownBox 作為組件重用的方法，並將在使用時需要顯示的數據傳遞給它。

Answer 1

ngOnInit() ：在 Angular 首先顯示數據綁定屬性並設置指令/組件的輸入屬性之后初始化指令/組件。 在第一個 ngOnChanges() 之后調用一次。

ngAfterViewInit() ：在 Angular 初始化組件的視圖和子視圖/指令所在的視圖之后響應。在第一個 ngAfterContentChecked() 之后調用一次。

您無法從父級檢索數據屬性，因為您正試圖從 ngOnInit 事件訪問父級。 它應該在 ngAfterViewInit Lifecyle 事件中。

請參考下面的示例。

父組件.html

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

子組件.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']);
  }
}

Output 日志