Generating a table with ngFor - Angular 5

Question

I am making a test table from a class created. Current class should generate a table of available data in my html file. But I do not see anything generated.

I am using Angular 5.

Expected table:
type1   Car
type2   Plane
type3   Truck

Component File:

import { Component, OnInit } from '@angular/core';
import { mService } from '../Dash/Dash.service';
import { m } from '../Dash/Dash.model;

@Component({
  selector: 'app-m',
  templateUrl: './m.component.html',
  styleUrls: ['./m.component.css'],
  providers: [mService]
})
export class mComponent implements OnInit {

  mServ: m[]

  constructor(private _mService: mService) {

  }
  ngOnInit() {
     this.mServ= this._mService.GetData(true);
  }

}

Service file

import { Injectable } from '@angular/core';
import { m } from '.Dash.model;

@Injectable()
export class mService {
  //sourc - not currently in use
  GetData(sour: boolean): m{

    var viewModel = new m();
    view.wheels= [
      "Car", "Plane", "Truck"
    ];

    view.type= [
      "type1", "type2", "type3"
    ];

    return view;
    }

  constructor() { }
}

Model file

import { Injectable } from '@angular/core';


@Injectable()
export class m{

  public wheels: Array<string>;
  public type: Array<string>;

  constructor() { }
}

HTML

   <table>
     <tbody>
        <tr *ngFor='let mServ&& mServ.length'>
          <td>{{ mServ.wheels}}</td>
          <td>{{ mServ.type}}</td>
     </tbody>
   </table>

Sajeetharan · Answer 1 · 2018-07-11T14:04:59.637

1

ngFor syntax above is wrong, it should iterate among objects not length

<tr *ngFor='let mServObj of mServ'>

if you want to check for *ngIf, you could do as,

 <tbody>
       <ng-container *ngIf= "mServ&& mServ.length > 0">
         <tr *ngFor='let mServObj of mServ'>
          <td>{{ mServ.wheels}}</td>
          <td>{{ mServ.type}}</td>
        </tr>
</tbody>

edited Jul 11 '18 at 14:04

answered Jul 11 '18 at 14:01

Sajeetharan

216,225
63
350
396

Guess, he wanted to have it as `*ngif` :-) – David R Jul 11 '18 at 14:03
1

@DavidR Updated as above – Sajeetharan Jul 11 '18 at 14:05
Yes I meant to have it as ngIf, with ngFor to generate the table with each available data. I just made the edit and I still don't see anything created on my page. – CryptoDood Jul 11 '18 at 14:08
I have an error here: mServ: m[ ] ngOnInit() { this.mServ= this._mService.GetData(true); } It says "Type m is not assignable to type m[ ] Property 'include' is missing in type m" – CryptoDood Jul 11 '18 at 14:11

Bitmask · Answer 2 · 2018-07-11T15:17:39.033

0

How about this: in your component. I have removed the service call, but assigning it to a value amounts to the same effect. //service.ts import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  public getData(source: boolean): Array<any> {
    return [{
      'wheels' : ['plane', 'truck', 'car'],
      'types': ['type1', 'type2', 'type3']
    }];
  }
}

App Component

//app.component.ts
import { Component } from '@angular/core';
import { MyService } from './service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  public view: any;
  constructor(private svc: MyService) {
    this.view =  this.svc.getData(true);

  }
}

Html Template

<table>
     <tbody>
        <tr *ngFor='let s of  view'>
          <!-- <td>
            {{s | json}}
          </td> -->
          <span *ngFor='let it of s.wheels; index as i' [attr.data-index]="i">
            <td>{{s.wheels[i]}}</td>
            <td>{{s.types[i]}}</td>
          </span>
     </tbody>
   </table>

edited Jul 11 '18 at 15:17

answered Jul 11 '18 at 14:29

Bitmask

918
2
11
22

Updated to use a service. – Bitmask Jul 11 '18 at 15:17
That works, now I need to use the custom class that I made. Like my original attempt. – CryptoDood Jul 11 '18 at 15:49
I think you should be able to instantiate and create the class - have you attempted it at all? – Bitmask Jul 11 '18 at 17:04
Hello, my table is displayed with commas...how do I remove them ? in my webpage the table shows as : test1, test2, test3 but I don't want to display the commas there... – CryptoDood Jul 11 '18 at 17:35
I dont see that in my template. May be you have an extra comma somewhere? – Bitmask Jul 11 '18 at 19:21

Generating a table with ngFor - Angular 5

2 Answers2

Linked