在 angular2 中嵌套了两个数据类的 ngFor

Question

我有两种数据类型的父子关系：

model.ts

export class Model {
  version: number;
  release: number;
  name: string;
}

模拟-models.ts

import { Model } from './model';


export const MODELS: Model[] = [
  {version: 8.7, release: 1.3, name: 'UDMH 87'},
  {version: 9.1, release: 2.0, name: 'UDMH 91'}
];

layers.ts

export class Layer {
  model: number;
  layer: string;
  loaded: number;
}

模拟-layers.ts

import { Layer } from './layer';

export const LAYERS: Layer[] = [
  {model: 9.1, layer: '1SIF', loaded: 1},
  {model: 9.1, layer: '1AW', loaded: 1},
  {model: 9.1, layer: '1DW', loaded: 0},
  {model: 8.7, layer: '2SIF', loaded: 0},
  {model: 8.7, layer: '2AW', loaded: 1},
  {model: 8.7, layer: '2DW', loaded: 1}
];

我打算使用模型构造函数在 html 上显示一张卡片：

model.component.ts

import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { ModelLayerComponent } from './Layer/layer.component';
import { ModelService } from './model.service';
import { Model } from './model';
import {LayerService} from './Layer/layer.service';
import { Layer } from './Layer/layer';




@Component({
  moduleId: module.id,
  selector: 'model-manager',
  templateUrl: 'model.component.html',
  styleUrls: ['model.component.css'],
  directives: [ ModelLayerComponent, ROUTER_DIRECTIVES ],
  providers: [ ModelService, LayerService ],
})
export class ModelComponent implements OnInit {
  models: Model[];
  layers: Layer[];
  selectedmodel: Model;

  constructor (private ModelService: ModelService, private LayerService: LayerService) {}

  getModels() {
    this.ModelService.getModels().then(models=>this.models = models);
  }

  getLayers() {
    this.LayerService.getAllLayers().then(layers=>this.layers = layers);
  }

  ngOnInit() {
    this.getModels();
    this.getLayers();
  }

我想要做的是显示一个卡片盒模型，每个盒子内都有它们的关联层：

model.component.ts

  <div class="row">
    <div *ngFor="let model of models" class="col-xl-3">
      <div class="card card-warning card-inverse">
        <div class="card-header card-warning">
          {{ model.name }}
        </div>
        <div class="card-block bg-white">
          UDMH Model {{ model.version }}
        </div>
      </div>
    </div>
  </div>

现在，我有两个模型，每个模型有 4 层。如何在模型的层中添加 *NgFor 嵌套？

我正在尝试做的事情的例子：

<div *ngFor="let model of models" class="col-xl-3">
      <!-- if any layer.loaded = 0 then change card-success to card-warning -->
      <!-- if all layer.loaded = 0 then change card-success to card-danger -->
      <div class="card card-success card-inverse"> 
        <div class="card-header card-warning">
          {{ model.name }}
        </div>
        <div class="card-block bg-white">
          UDMH Model {{ model.version }}
          <br />
          <ul>
            <!-- filter by model.version -->
            <li *ngFor="let layer of layers">
              {{ layer.model }}:  {{ layer.layer }}
            </li>
          </ul>
        </div>
      </div>
    </div>

这给我留下了两个可观察的选择： 1. 以某种方式在服务中加入 mock-models.ts 到 mock-layers.ts。如果是这样，如何？ 2. 有什么方法可以将模板绑定在一起？

我该如何进行？谢谢。

Answer 1

使用管道过滤图层

http://plnkr.co/edit/KTPPWC6sECG0zmkmrcxr?p=preview

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'filterModel'})
export class FilterModelPipe implements PipeTransform {
  transform(layers: any[], model: any): number {
    return layers.filter(e=>e.model === model);
  }
}

您还可以在获取模型时设置所有相关层。

在 angular2 中嵌套了两个数据类的 ngFor

nested ngFor with two data classes in angular2

angular2-template

angular

model.ts

模拟-models.ts

layers.ts

模拟-layers.ts

model.component.ts

model.component.ts

在 angular2 中嵌套了两个数据 类 的 ngFor

nested ngFor with two data classes in angular2

angular2-template

angular

model.ts

模拟-models.ts

layers.ts

模拟-layers.ts

model.component.ts

model.component.ts

在 angular2 中嵌套了两个数据类的 ngFor