Question

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

该item组件有一个名为post的对象，我想在实例化我的list组件中的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显示成为我的带有<p></p>标签的“ hohoho”和“ hehehe”项的列表。但是它保持为空。

欢迎任何帮助。

我是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>

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

0 个答案: