Question

我试图抽象出一个表格数据显示，使其成为可以加载到各种父组件中的子组件。我这样做是为了让整个应用程序干燥＆＃34;。在我使用observable订阅服务并进行API调用然后直接打印到每个组件视图（每个组件视图都具有表格布局）之前。现在我想让表格数据区域成为子组件，并且只为每个父组件绑定observable的结果。无论出于何种原因，这都没有按预期工作。

以下是我在父组件视图中的内容：

<div class="page-view">
    <div class="page-view-left">
        <admin-left-panel></admin-left-panel>
    </div>
    <div class="page-view-right">
        <div class="page-content">
            <admin-tabs></admin-tabs>
            <table-display [records]="records"></table-display>
        </div>
    </div>
</div>

组件文件如下所示：

import { API } from './../../../data/api.service';
import { AccountService } from './../../../data/account.service';
import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { TableDisplayComponent } from './../table-display/table-display.component';

@Component({
  selector: 'account-comp',
  templateUrl: 'app/views/account/account.component.html',
  styleUrls: ['app/styles/app.styles.css']
})
export class AccountComponent extends TabPage implements OnInit {

    private section: string;
    records = [];
    errorMsg: string;

    constructor(private accountService: AccountService,
                router: Router,
                route: ActivatedRoute) {
    }

    ngOnInit() {
       this.accountService.getAccount()
            .subscribe(resRecordsData => this.records = resRecordsData,
            responseRecordsError => this.errorMsg = responseRecordsError);
    }
}

然后，在子组件（包含表显示视图的组件）中，我包含一个@Input（）用于＆＃34;记录＆＃34; - 这是我的observable的结果在父组件中分配的结果。所以在子（table-display）组件中，我有这个：

import { AccountService } from './../../../data/account.service';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'table-display',
  templateUrl: './table-display.component.html',
  styleUrls: ['./table-display.component.less']
})
export class TableDisplayComponent {

    @Input() records;

    constructor() {
    }

}

最后，这里是我的表格显示视图中的一些相关代码：

<tr *ngFor="let record of records; let i = index;">
<td>{{record.name.first}} {{record.name.last}}</td>
                <td>{{record.startDate | date:"MM/dd/yy"}}</td>
                <td><a class="bluelink" [routerLink]="['/client', record._id ]">{{record.name.first}} {{record.name.last}}</a></td>

当我使用此配置时，我得到＆＃34; undefined＆＃34; ＆＃34;记录的错误＆＃34;属性我通过API /数据库引入。当我在同一组件中同时显示表格和服务调用时，我没有收到这些错误。所以我在这里所做的就是从表格中抽象出来，这样我就可以将它嵌套在几个父组件中，而不是让每个需要它的父组件都显示相同的表格显示。

我在这里缺少什么？这个配置看起来有什么问题？

Answer 1

你需要保护记录在它进入你的子组件（因此它的视图）之前是空的。

使用Elvis运算符保护您的模板：

<tr *ngFor="let record of records; let i = index;">
    <td>{{record?.name?.first}} {{record?.name?.last}}</td>
    <td>{{record?.startDate | date:"MM/dd/yy"}}</td>
    <td><a class="bluelink" [routerLink]="['/client', record?._id ]">  {{record?.name?.first}} {{record?.name?.last}}</a></td>

您还可以将输入分配给空数组以帮助解决此问题：

@Input() records = [];

@Input（）在Angular 2应用程序中不在父子组件之间传递

1 个答案: