Question

我有一个DossierEntry数组，如果您选择一个项目，则必须转到该项目。但是，如果您现在选择一个项目，将会得到如下错误：

dossier-correspondence-item.component.html：15错误TypeError：无法读取未定义的属性“ isJson” 在Object.updateDirectives（dossier-correspondence-item.component.html：15）在Object.debugUpdateDirectives [作为updateDirectives]（core.js：30537）在checkAndUpdateView（core.js：29933）在callViewAction（core.js：30174）在execEmbeddedViewsAction（core.js：30137）在checkAndUpdateView（core.js：29934）在callViewAction（core.js：30174）在execComponentViewsAction（core.js：30116）在checkAndUpdateView（core.js：29939）在callViewAction（core.js：30174）

行是这样的：

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

具有数组的Parent组件如下所示：

<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代码对Parent组件重要的是：

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

所以我的问题是我必须改变什么？

谢谢

所以这在父组件中：

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

哦，如果我这样做：

 <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的可为空性，对于出现的错误，您会很好的

如何在Angular 8中将属性从父级传递到子级组件？

1 个答案: