Angular @Input () массив из другого компонента, проблема - PullRequest
Новая
       22

Angular @Input () массив из другого компонента, проблема

0 голосов
/ 10 апреля 2020

Я новичок в Angular и пытаюсь работать над очень простым c приложением для блога. Я получил некоторую помощь здесь, чтобы получить свойство из другого компонента через декоратор @Input (), но, похоже, он не работает для массивов или, по крайней мере, не так. В компоненте post-list-item, встроенном в компонент post-list, я хочу отобразить значения свойств, расположенных в массиве app-component.ts. Очевидно, что я что-то упускаю, и я не знаю, что это, поэтому прошу вашей помощи!

Вот мой код: Stackblitz

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Спасибо, что поделились стекаблиц. Я считаю, что это тот массив, через который вы пытаетесь работать, верно? 

[
  { 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>

Как я сделал с заголовком и содержанием. В настоящее время я нашел только эти два поля в объектах, и то же самое применимо к другим полям.

Кроме того, я сделал стекаблитц, который имел бы больше смысла. Я удалил некоторые вещи, чтобы вы знали, что требуется, а что нет.

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

0 голосов
/ 10 апреля 2020

Полагаю, вы хотите 

<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}}

A @Input также является общедоступной c переменной

...