CODEWITHSUNDEEP
angularangular2-template
arcee123
arcee123

Reputation: 243

nested ngFor with two data classes in angular2

I have a child-parent relationship with two data types:

model.ts

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

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

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

it is my intent to display a card on html using the model constructor:

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

what I want to do is display a cardbox of models with their associative layers inside each box:

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>

right now, I have two models and 4 layers each. How do I add a *NgFor to nest in the layers in the model?

example of what I'm trying to do:

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

this leaves me with two observable options: 1. join mock-models.ts to mock-layers.ts somehow in the service. if so, how? 2. any way to tie the template together?

how do I proceed? Thanks.

Upvotes: 0

Views: 347

Answers (1)

Yong
Yong

Reputation: 1127

Use a pipe to filter layers

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

You can also setup all of the related layers when getting models.

Upvotes: 1

Related Questions