Как передать свойство от родительского к дочернему компоненту в Angular 8?

Question

У меня есть массив DossierEntry, и если вы выбираете один элемент, вы должны перейти к этому элементу. Но если вы сейчас выберите элемент, вы получите ошибку, подобную этой:

dossier -respondence-item.component.html: 15 ОШИБКА TypeError: Невозможно прочитать свойство 'isJson' из неопределенного в Object.updateDirectives(dossier -respondence-item.component.html: 15) в Object.debugUpdateDirectives [as updateDirectives] (core.js: 30537) в checkAndUpdateView (core.js: 29933) в callViewAction (core.js: 30174) в execEmbeddedViewsAction (.js: 30137) в checkAndUpdateView (core.js: 29934) в callViewAction (core.js: 30174) в execComponentViewsAction (core.js: 30116) в checkAndUpdateView (core.js: 29939) в callViewAction (core.js: 301)

и строка такова:

    <div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">

Родительский компонент с массивом выглядит следующим образом:

<ng-container *ngIf="correspondenceEntries">
    <app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (onClick)="gotoItem($event)"> </app-dossier-correspondence-list>
  </ng-container>

  <ng-container *ngIf="attachmentEntries">
    <app-dossier-correspondence-attachments
      [attachmentEntries]="attachmentEntries" (onClick) = "gotoItem($event)"
    ></app-dossier-correspondence-attachments>
  </ng-container>

  <app-dossier-correspondence-item
  [item]="single"
  (goBack)="goBack($event)"
  *ngIf="showingSingle">
  </app-dossier-correspondence-item>
</app-vital10-page>

и ts-код кускакода, что важно для родительского компонента:

gotoItem(index, type: string) {

    switch (type) {
      case 'correspondence': {
        console.log('triggered');
        this.single = this.correspondenceEntries[index];

        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }
    this.showingSingle = true;
  }

Модель DossierEntry выглядит следующим образом:

export class DossierEntry {
  dossierEntryId: number;
  date: string;
  name: string;
  referenceId: string;
  summary: string;
  jsonSummary: Array<DossierEntryHeader>;
  isJson: boolean;
  hasFile: boolean;
  file: Blob;
  fileName: string;
  type: string;
}

Итак, мой вопрос, что я должен изменить?

Спасибо

So это в родительском компоненте:

<ng-container *ngIf="correspondenceEntries">
    <app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (onClick)="gotoItem($event)"> </app-dossier-correspondence-list>
  </ng-container>

  <ng-container *ngIf="attachmentEntries">
    <app-dossier-correspondence-attachments
      [attachmentEntries]="attachmentEntries" (onClick) = "gotoItem($event)"
    ></app-dossier-correspondence-attachments>
  </ng-container>

И это дочерний компонент:

<div *ngIf="!showingSingle  && correspondenceEntries && correspondenceEntries.length > 0;">
  <div class="main-row main-row-dossier">
    <section class="data-entry">
      <h3 class="dossier-header">Algemeen</h3>
      <table class="dossier-table" *ngIf="correspondenceEntries  else loadingCorrespondenceEntires ">
        <thead class="dossier-tableheader">
          <tr>
            <th class="dossier-tablehead fixed-one-fifth">Datum</th>
            <th class="dossier-tablehead fixed-four-fifths">Onderwerp</th>
          </tr>
        </thead>
        <tbody class="dossier-tablebody">
          <tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="click(i, entry.type)">
            <td>{{ entry.date | date:"dd-MM-y" }}</td>
            <td>{{ entry.name }}</td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</div>

<ng-template #loadingCorrespondenceEntires>
  <div>..Loading </div>
</ng-template>

и файл ts:

export class DossierCorrespondenceListComponent implements OnInit {

  @Input()
  correspondenceEntries: DossierEntry[];


  @Output() onClick = new EventEmitter();

  @Input() showingSingle;

  constructor() { }

  ngOnInit() {
  }

  // tslint:disable-next-line: use-life-cycle-interface
    ngOnChanges(changes) {
  }

  click(i, type) {
    this.onClick.emit({i: i, type: type});
  }


}

И у меня это естьуже объявлено в родительском компоненте, как это:

export class DossierCorrespondenceComponent implements OnInit {
  correspondenceEntries$: Observable<DossierEntry[]>;
  attachmentEntries$: Observable<DossierEntry[]>;

  @Input() allCorrespondence: Array<DossierEntry>;
  @Input() correspondenceEntries: Array<DossierEntry>;
  @Input() attachmentEntries: Array<DossierEntry>;

  //@Input() myGotoItem: Function;

  message = '';
  emptyMessageCorrespondentie = 'Geen correspondentie.';
  errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;

  showingSingle = false;

   single: DossierEntry;

oke, И если я сделаю это:

 <ng-container *ngIf="correspondenceEntries">
    <app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (click)="gotoItem(i, entry.type)"> </app-dossier-correspondence-list>
  </ng-container>

Я получу эту ошибку:

ERROR TypeError: Cannot read property 'type' of undefined

Но еслиЯ делаю это:

  click(i, type) {
    console.log('clicked ' + type);
    this.onClick.emit({i: i, type: type});
  }

Я вижу: clicked correspondence

, и поэтому это DossierCorrespondenceItemComponent:

export class DossierCorrespondenceItemComponent implements OnInit {
  @Input() item: DossierEntry;

  @Output() goBack = new EventEmitter();

  safeHTMLUrl: SafeResourceUrl;
  fileLoading = false;
  showFile = false;
  canOpenBlob = false;

  constructor(
    public sanitizer: DomSanitizer,
    private router: Router  ) {
    // IE/Edge specific
    this.canOpenBlob = !!window.navigator && !!window.navigator.msSaveOrOpenBlob;
  }

  handleGoBack() {
    this.goBack.emit();
  }
  openPdf(dossierEntryId: number) {
    this.router.navigate(['dossier/overig/pdf/', dossierEntryId]);
  }

  ngOnInit() {
    if (!this.item.isJson) {
      if (window.btoa) {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
          'data:text/html;base64,' + btoa(this.item.summary)
        );
      } else {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl('data:text/html;utf-8,' + this.item.summary);
      }
    }
  }

, и это ошибка:

Cannot read property 'isJson' of undefined
    at DossierCorrespondenceItemComponent.push../src/app/dossier/dossier-correspondence-item/dossier-correspondence-item.component.ts.DossierCorrespondenceItemComponent.ngOnInit (dossier-correspondence-item.component.ts:36)

Answer 1

Вы должны сохранить выбранную запись где-нибудь в родительском компоненте

selectedEntry: DossierEntry;
selectEntry(entry: DossierEntry): void {
   this.selectedEntry= entry;
}

Кроме того, вы должны использовать событие (click) вместо (onClick) в угловом. Используйте метод selectEntry при нажатии.

И ваш вызов дочернего компонента должен иметь @Input (см. https://angular.io/guide/component-interaction)

При вызове дочернего компонента проверьте обнуляемость вашего selectedEntry, и выподойдет для вашей ошибки