Question

我有一个项目api，它包含material_projects或project_services。我很困惑如何显示其中任何一个。如果我显示material_projects，那么我不能显示project_services。 project_services在api中必须为空。

getAllProjects() {
    this.subscription = this.projectsService.getAll()
      .subscribe(
        (data:any) => {
          this.projects = data.projects;
          console.log(data);
        },
        error => {
          console.log(error);
        });
  }

HTML

 <div class="card-block" *ngFor="let project of projects | search : searchBOM">
   <h2 class="proj-name">{{ project.name | titlecase }} </h2>
   <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Material SKU</th>
        <th>Material Name</th>
        <th>Unit</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let innerItem of project.material_projects">
        <td>{{innerItem.material.sku}}</td>
        <td>{{innerItem.material.name}}</td>
        <td>{{innerItem.unit}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

如果你能保证这个约束，那么你可以简单地遍历两个列表。

<tbody>
  <tr *ngFor="let innerItem of project.material_projects">
    <td>{{innerItem.material.sku}}</td>
    <td>{{innerItem.material.name}}</td>
    <td>{{innerItem.unit}}</td>
  </tr>
  <tr *ngFor="let innerItem of project.project_services">
    <td>{{innerItem.service.sku}}</td>
    <td>{{innerItem.service.name}}</td>
    <td>{{innerItem.unit}}</td>
  </tr>
</tbody>

作为替代方案，您可以有条件地显示一个或另一个：

<tbody>
  <ng-container *ngIf="project.material_projects.length > 0; then #materialProjectsRows; else #projectServicesRows"></ng-container>
  <ng-template #materialProjectsRows>
    <tr *ngFor="let innerItem of project.material_projects">
      <td>{{innerItem.material.sku}}</td>
      <td>{{innerItem.material.name}}</td>
      <td>{{innerItem.unit}}</td>
    </tr>
  </ng-template>
  <ng-template #projectServicesRows>
    <tr *ngFor="let innerItem of project.projectServices">
      <td>{{innerItem.service.sku}}</td>
      <td>{{innerItem.service.name}}</td>
      <td>{{innerItem.unit}}</td>
    </tr>
  </ng-template>
</tbody>

或者，如果DTO足够相似，您可以考虑共享更多的视图逻辑：

<tbody>
  <!-- You may want to perform the concatenation inside of the view model for additional clarity -->
  <tr *ngFor="let innerItem of project.material_projects.concat(project.project_services)">
    <td>{{(innerItem.material || innerItem.service).sku}}</td>
    <td>{{(innerItem.material || innerItem.service).name}}</td>
    <td>{{innerItem.unit}}</td>
  </tr>
</tbody>

编辑：

如果您希望根据属性的存在使用不同的表格，那么您需要将*ngIf语句移至<table>元素或直接子元素。根据您的评论，您可以尝试以下内容：

<div class="card-block" *ngFor="let project of projects | search : searchBOM">
  <ng-container *ngIf="getProjectType(project)">
    <h2 class="proj-name">{{ project.name | titlecase }}</h2>

    <table *ngIf="getProjectType(project) === 'material'" class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>Material SKU</th>
          <th>Material Name</th>
          <th>Unit</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let innerItem of project.material_projects">
          <td>{{innerItem.material.sku}}</td>
          <td>{{innerItem.material.name}}</td>
          <td>{{innerItem.unit}}</td>
        </tr>
      </tbody>
    </table>

    <table *ngIf="getProjectType(project) === 'services'" class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>Project SKU</th>
          <th>Project Name</th>
          <th>Unit</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let innerItem of project.project_services">
          <td>{{innerItem.project.sku}}</td>
          <td>{{innerItem.project.name}}</td>
          <td>{{innerItem.unit}}</td>
        </tr>
      </tbody>
    </table>

  </ng-container>
</div>

组件代码：

export class ProjectComponent {
    ...
    public getProjectType(project: Project): 'material' | 'services' | null {
        return project.material_projects.length > 0 ? 'material'
            : project.project_services.length > 0 ? 'services'
            : null;
    }
    ...
}

有很多方法可以做到这一点。另一种选择是在模板中使用switch语句，或者添加额外的子（“虚拟”）组件来处理行为。

在Angular 2/4中显示特定数据

1 个答案: