Question

我正在尝试使用Child组件中的数据填充表行。虽然填充了数据但格式不正确。行中的所有值都在一列下，而不是均匀分布。请指导实现它。谢谢！！！下面是代码。 PS：我已经导入了所有必需的模块/类。

MRO项-list.component.ts

export class MroItemListComponent implements OnInit {
    mockMROItems: Mro[] = MRO_ITEMS;
    index: number;
    constructor() { }
    ngOnInit() {}
    }

MRO项-list.component.html

<table class="table table-striped">
<thead>
  <tr>
    <th>#Index</th>
    <th>Ticket Number</th>
    <th>Activity</th>
    <th>comments</th>
    <th>Date</th>        
    <th>Portfolio</th>
    <th>UserID</th>
    <th>Hrs</th>
  </tr>
</thead>
<tbody>
<app-mro-item *ngFor="let mockMROItem of mockMROItems"   [mroElement]="mockMROItem"></app-mro-item>           
</tbody>

MRO-item.component.ts

export class MroItemComponent implements OnInit {
@Input() mroElement: Mro;
constructor() { }
ngOnInit() { }
}

MTO-item.component.html

<th>Index</th>
<td>{{mroElement.tickteNumber}}</td>
<td>{{mroElement.activity}}</td>
<td>{{mroElement.comments}}</td>
<td>{{mroElement.date}}</td>
<td>{{mroElement.portfolio}}</td>
<td>{{mroElement.userID}}</td>
<td>{{mroElement.hrsSpent}}</td>

如何使用正确的样式从Angular 4中的子组件数据填充表的父组件行？

0 个答案: