Невозможно получить данные из атрибута данных в Angular 7 - PullRequest
Новая
       34

Невозможно получить данные из атрибута данных в Angular 7

0 голосов
/ 31 октября 2019

Я пытаюсь повторно использовать kendoDropDownListBox и установить данные с помощью атрибута данных в родительском элементе для запроса правильного источника данных в сочетании с оператором переключения регистра. Часть кода переключения регистра не включена, так как она работает, когда ему передаются правильные данные, я просто не могу извлечь нужные данные из атрибута данных (если я использую кнопки для передачи данных, все работает нормально)

Я пытался использовать несколько методов для извлечения атрибута, включая следующие:

element.dataset [имя ключа] element.getAttribute ('keyname']

Если я сделаюconsole.log ('element') Я вижу правильные данные, но любой из двух вышеупомянутых методов получается пустым (либо нулевым, либо неопределенным).

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 содержит следующее: введите здесь описание изображения

Переменная elatt содержит следующее: введите описание изображения здесь

переменная elkey ​​сообщает "undefined", а переменная att сообщает "null".

Я уверен, что, вероятно, я делаю это нелегко, нобудучи новичком в Angular, я не уверен, что лучшеЯ хочу сделать это.

В конечном итоге мне нужен способ повторно использовать kendoDropdownBox в качестве компонента и передавать ему данные, необходимые для отображения при его использовании.

1 Ответ

0 голосов
/ 31 октября 2019

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

Выходной журнал

enter image description here

...