Как получить значения массива из атрибута?
Я делаю приложение в angular 6, и поскольку я отправляю и получаю данные в динамическом режиме, мне нужно передавать и извлекать значения массива через атрибут, для которого я использовал следующее:
HTML:
<ul class = "list-unstyled" id = "list" [attr.parent_id] = "123">
<li #li class = "media p-2 column" *ngFor = "let item of items;let i = index;" [attr.items] = "item"> {{item.name}} </li>
</ul>
TS:
import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChildren("li") listElements: QueryList<ElementRef<HTMLLIElement>>;
name = 'Angular';
items = [
{ "id": 123, "name": "hello" },
{ "id": 234, "name": "world" }
]
ngAfterViewInit() {
this.printElements();
this.listElements.changes.subscribe(_ => this.printElements());
}
private printElements() {
const elements = this.listElements.toArray();
elements.forEach(element => {
console.info(element.nativeElement.getAttribute('items'));
})
}
}
Рабочий стек:
https://stackblitz.com/edit/angular-jndtv1
Здесь вместо
console.info(element.nativeElement.getAttribute('items'));
(что дает [объект объект])
Если я включу JSON.stringify,
console.info(JSON.stringify(element.nativeElement.getAttribute('items')));
(дает "[объект объект]")
Пожалуйста, помогите мне получить значения массива через атрибут, используя только Чистый javascript / машинописный текст без jquery.
@ritaj, мне нужно получить значение только через атрибут, и я не должен использовать innerText .. Мне тоже нужен весь массив из этого атрибута .. element.nativeElement.innerText дает только значение имени ..
ты можешь это проверить?
@ Асанка, какая?
@Asanka, это то, что я упомянул в комментарии выше, мне нужно получить весь массив из атрибута без использования innerHTML или innerText
но почему? у вас уже есть itemArray
@ManiRaj Я получаю «Hello» и «world», напечатанные на консоли в вашем проекте stackblitz. Где вы получаете объект объект?
@Debojyoti, Проверьте сейчас, меняли для проверки с помощью innerText, KIndly проверьте с помощью рассматриваемого кода.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
вы можете сделать это, не лучший способ, но он работает:
в вашем html:
<ul class = "list-unstyled" id = "list" [attr.parent_id] = "123">
<li #li class = "media p-2 column" *ngFor = "let item of items;let i = index;"
[attr.items] = "item | json"> {{item.name}} </li>
</ul>
в вашем ts:
private printElements() {
const elements = this.listElements.toArray();
elements.forEach(element => {
console.info(JSON.parse(element.nativeElement.getAttribute('items')).id);
console.info(JSON.parse(element.nativeElement.getAttribute('items')).name);
})
}
console.info(element.nativeElement.innerText);