angular - 在将组件对象显示到结构指令 *ngFor 之前对其进行修改

Question

我正在研究一个简单的 Angular 基础示例，其中有必要通过一个组件显示另一个组件的列表。

项目组件有一个名为属性的对象post，我想在我的列表组件中实例化我的项目组件时访问属性。

我以为我找到了解决方案，但现在我不能做的是在不修改我的项目的帖子属性的情况下将项目实例添加到我的列表组件中......向前迈出两步。

我尝试直接从传递字符串变量的构造函数分配对象的属性。但是，此时我在 DOM 项目选择器的行中遇到了一个错误，在该行中我使用ngFor. 它说没有字符串提供者 - 所以我尝试添加provider:[String]到项目组件中，但这导致了另一个错误。

现在，我将空字符串值从构造函数传递给我的项目对象，并创建了一个从组件外部更改它的方法。

问题是，当我将实例化的项目推入项目的数组中，并使用传递给我的方法的新字符串值进行修改时，我的项目的显示将它们显示为空字符串 - 而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>。然而它仍然是空的。

欢迎任何帮助。

我是 Stack Overflow 的新手，如果我的提问不够概括或不够明确，我深表歉意。

---

编辑：

下面是我的列表组件 html 文件

<button (click)="addItem()">add article</button>
<ul>
  <app-post-list-item-component *ngFor="let item of items" ></app-post-list-item-component>
</ul>

标签： angular