Question

我的app.component.html看起来像这样：

<table>
<th>
  <td>Name</td>
  <td>Mobile</td>
  <td>Email</td>
</th>

<tr *ngFor="let user of TableData">
  <td>{{user.name}}</td>
  <td>{{user.mobile}}</td>
  <td>{{user.email}}</td>
</tr>

</table>

我的app.component.ts看起来像这样：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
 TableData: any = [];
 ShowEditTable: boolean = false;
 EditRowID: any = '';
 constructor() {
   this.TableData = [
    {name: 'Satish', mobile: '8979789787', email: 'aa@asasd.dad'},
    {name: 'Ram', mobile: '8979789987', email: 'opooop@asasd.dad'},
   ];
 }
}

该表未在浏览器http://localhost:4200/

中显示

Answer 1

更改模板代码，如下所示，

<div>
  <table>
    <thead>
      <tr>
        <td>Name</td>
        <td>Mobile</td>
        <td>Email</td>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of TableData">
        <td>{{user.name}}</td>
        <td>{{user.mobile}}</td>
        <td>{{user.email}}</td>
      </tr>
    </tbody>
  </table>
</div>

<强> DEMO

表未在浏览器中显示

1 个答案: