Я работаю над простым примером основ Angular, в котором необходимо отображать через один компонент список другого.
Компонент item имеет объект как свойство с именем post, и я хотел быМне нравится обращаться к атрибутам при создании экземпляра моего элемента item в моем компоненте списка.
Я думал, что нашел решение, но сейчас я не могу добавить экземпляры элемента в мой список без изменения атрибутов записей моего элемента ...один шаг вперед, два шага назад.
Я попытался присвоить атрибуты объекта непосредственно из конструктора, передавая строковые переменные.Тем не менее, в этот момент я встретил ошибку в строке моего селектора элементов DOM, где я отображаю список своего элемента с ngFor.В нем говорится, что для строки не было поставщика - поэтому я попытался добавить provider:[String] в компонент item, но это привело к другой ошибке.
Теперь я передаю пустые строковые значения объекту моего элемента из конструктора и создаю метод для его изменения извне компонента.
Проблема заключается в том, что я помещаю свой экземпляр объекта в свой элементмассив, модифицированный новыми строковыми значениями, переданными моему методу, отображение моих элементов показывает их с пустыми строками - тогда как console.log(item) показывает их с измененными атрибутами.
Вот мой фактический код в двух компонентах:
Компонент элемента:
export class PostListItemComponentComponent implements OnInit {
public post: {
title: string;
content: string;
loveIts: number;
created_at: Date;
};
constructor() {
const title = "";
const content = "";
const created_at = new Date();
const loveIts = 0;
this.post = { title, content, loveIts, created_at };
}
addContent(title: string, content: string) {
const created_at = new Date();
const loveIts = 0;
this.post = { title, content, created_at, loveIts };
return this.post;
}
Компонент списка:
export class PostListComponentComponent implements OnInit {
public items: Array<PostListItemComponentComponent>;
constructor() {
this.items = [];
}
addItem() {
const title = "hohoho";
const content = "hehehe";
const item = new PostListItemComponentComponent();
item.addContent(title, content);
this.items.push(item);
console.log(this.items);
}
}
Я просто ожидаю, что дисплей DOM будетмой список предметов с "hohoho" и "hehehe" в тегах <p></p>.Однако он остается пустым.
Любая помощь приветствуется.
Я новичок в переполнении стека, поэтому извините, если мои вопросы не суммированы или недостаточно точны.
Редактировать:
Ниже приведен HTML-файл компонента моего списка
<button (click)="addItem()">add article</button>
<ul>
<app-post-list-item-component *ngFor="let item of items" ></app-post-list-item-component>
</ul>