Question

我正在根据创建的类制作测试表。当前类应在我的html文件中生成可用数据表。但我看不到产生任何东西。

我正在使用Angular 5。

Expected table:
type1   Car
type2   Plane
type3   Truck

组件文件：

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

}

服务文件

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

模型文件

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>

Answer 1

ngFor上面的语法是错误的，它应该在对象而不是长度中进行迭代

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

如果要检查* ngIf，可以这样做，

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

Answer 2

如何？在您的组件中。我已经删除了服务调用，但是将其分配给一个值的效果相同。 //service.ts 从'@ angular / core'导入{可注射};

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

应用程序组件

//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模板

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

使用ngFor生成表-Angular 5

2 个答案: