Angular 来自其他组件的@Input() 数组，问题

Question

我是 Angular 的新手，我正在尝试开发一个非常基本的博客应用程序。我在这里得到了一些帮助，可以通过 @Input() 装饰器从另一个组件中检索属性，但它似乎不适用于数组，或者至少不适用于数组。在嵌入 post-list 组件的 post-list-item 组件中，我想显示位于 app-component.ts 数组中的属性值。显然我遗漏了一些东西，我不知道它是什么，因此请求你的帮助！

这是我的代码：Stackblitz

Answer 1

我猜你想要

<ul class="list-group" *ngFor="let p of publisPL">
  <app-post-list-item [titrePubliIT]="p.titrePubliPL"
                      [contenuPubliIT]="p.contenuPubliPL"
                      [datePubliIT]="p.datePubliPL"></app-post-list-item>
</ul>

或（但更改 @Input()s

<ul class="list-group" *ngFor="let p of publisPL">
  <app-post-list-item [publish]="p">
</ul>

//and use
{{p.titrePubliIT}}

而且你不需要创建函数 getTitrePubli(),getContenuPubli(),...

可以直接使用

{{titrePubliIT}}

一个@Input也是一个public变量

Answer 2

感谢分享 stackblitz。我相信这就是您要尝试处理的数组，对吧？

[
  { titrePubli: "Ma première publi", contenuPubli: "C'est le bla bla bla" },
  { titrePubli: "Ma seconde publi", contenuPubli: "Un autre blablabla" },
  { titrePubli: "Ma troisième publi", contenuPubli: "Ohlàlà" },
];

你不必这样做：

<app-post-list-item
  *ngFor="let p of publisPL"
  [publisIT]="p"
  [titrePubliIT]="p.titrePubliPL"
  [contenuPubliIT]="p.contenuPubliPL"
  [datePubliIT]="p.datePubliPL"
></app-post-list-item>

相反，您可以这样做：

<app-post-list-item
    *ngFor="let p of publisPL"
    [publisIT]="p"
></app-post-list-item>

并且在 post-list-item.component.html 中，您可以直接访问值，而无需使用这么多方法的所有麻烦：

<li class="list-group-item">
    <h3 style="font-size: 20px;">Titre : {{ publisIT?.titrePubli }}</h3>
    <h4 style="font-size: 18px;">Contenu : {{ publisIT?.contenuPubli }}</h4>
    <button type="button" class="btn btn-success"
            (click)="onJadore()">
            J'adore {{ getJadorePubli() }}</button>
    <button type="button" class="btn btn-danger"
            style="position: relative; left: 0.6em;"
            (click)="onJeDeteste()">
            Je déteste {{ getJeDetestePubli() }}</button>
    <p style="display: inline; position: relative; top: 0.6em; left: 1em;">{{ getDatePubli() | date: "EEEE dd/MM/yy HH:mm" }}</p>
</li>

就像我对标题和内容所做的那样。目前我只在 objects 中找到这两个字段，同样适用于其他字段。

另外，我做了一个 stackblitz，这会更有意义。我删除了一些东西，这样您就知道什么是必需的，什么不是。

https://stackblitz.com/edit/mini-blog-ex

Angular 来自其他组件的@Input() 数组，问题

Angular @Input() array from other component, problem

components

input

typescript

display

angular