Как отправить @Input нескольким компонентам? - PullRequest
Новая
       11

Как отправить @Input нескольким компонентам?

0 голосов
/ 27 декабря 2018

Я хочу отправить @Input () двум различным компонентам: один - элемент списка, другой - элемент-элемент.Они должны использовать более или менее одинаковые свойства.

Я пытался использовать разные службы для отправки одного и того же ввода, с и без Observable и Subscribe, но я всегда получаю одно и то же сообщение об ошибке при попытке показать свой элементкомпонент -detail: "Не удается прочитать свойство" свойство "undefined" .Элемент списка работает нормально.

Вот мой код:

Список HTML: 

<div class="container list-group">
  <a *ngFor="let actu of actus" class="list-group-item list-group-item-action flex-column align-items-start" [routerLink]="['/article', actu.id]">
    <app-item-actus [actu]="actu"></app-item-actus>
  </a>
  <div *ngFor="let actu of actus" class="hide">
    <app-actu-detail [article]="actu" class="hide"></app-actu-detail>
  </div>
  <br>
</div>

Здесь я пытаюсь скрытый * ngFor, чтобы отправить мои детали в детали(class = "hide" - это отображение: нет).

Список TS: 

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

import { ActuService } from 'src/app/services/actu.service';
import { Actu } from '../../../modeles/actu';

@Component({
  selector: 'app-liste-actus',
  templateUrl: './liste-actus.component.html',
  styleUrls: ['./liste-actus.component.css']
})

export class ListeActusComponent implements OnInit {

  actus: Actu[];

  constructor(private actuService: ActuService) { 
  }

  ngOnInit() {
    this.actuService.getActusList().subscribe(data => { this.actus = data; });
  }
}

Я не использовал Observable для проверки того же результата или нет, но ничего не кажетсяизменить.

Детальный элемент HTML 

<div>
  <h2>{{article.titre}}</h2>
  <br>
  <blockquote *ngIf="article.exergue"><i>{{article.exergue}}</i> 
  </blockquote>
  <br>
  <figure>
    <img *ngIf="article.image" src="{{article.image}}" alt="image article">
    <figcaption>{{article.legendeImage}}</figcaption>
  </figure>
  <br>
  <p *ngIf="article.paragraphe1">{{article.paragraphe1}}</p>
  <br>
  <h4 *ngIf="article.intertitre1">{{article.intertitre1}}</h4>
  <br>
  <p *ngIf="article.paragraphe2">{{article.paragraphe2}}</p>
  <br>
  <h4 *ngIf="article.intertitre2">{{article.intertitre2}}</h4>
  <br>
  <p *ngIf="article.paragraphe3">{{article.paragraphe3}}</p>
  <br>
</div>

Вот мой подробный HTML-код, более или менее совпадающий с моим списком, с большим количеством отображаемых свойств.

Item-detail TS 

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-actu-detail',
  templateUrl: './actu-detail.component.html',
  styleUrls: ['./actu-detail.component.css']
})
export class ActuDetailComponent implements OnInit {

  @Input() article: any;

  constructor() { }

  ngOnInit() {
  }

}

Я использую пружинный проект + mysql в качестве back и DB, и я новичок в мире кодирования, так что я мог где-то сделать большую ошибку, но не могу понятьгде.

Заранее спасибо за помощь в решении моей проблемы.

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Ваша проблема возникает из-за того, что при монтировании компонента свойство, которое вы передаете компоненту, не определено, поэтому вы не можете получить доступ к свойству undefined.Вы можете решить эту проблему, добавив значение по умолчанию к входу в вашем компоненте:

в app-item-actus: 

@Input() actu: any = {};

Также в app-actu-detail вы отправляете реквизит с именем [article]: поэтому вы должны получить его как: 

@Input() article: any = {};
0 голосов
/ 27 декабря 2018

Я думаю, что вы должны добавить * ngIf, чтобы убедиться, что ваши данные определены до цикла: 

<div class="container list-group" *ngIf="actus">
...
</div>

Если вы хотите избежать белого экрана во время выборки данных, вы должны использовать средства распознавания https://angular.io/api/router/Resolve

...