Question

我正在使用Angular CLI从事自动化项目。如何使用*ngFor.？

创建动态列和动态行表

在先前版本的角度像AngularJS。我在AngularJS dynamic table with unknown number of columns

的帮助下完成了这个方法

如何解决这个问题？

Answer 1

您需要拥有嵌套的ngFor语句，您还需要设置数据对象以确保它易于使用，但这就是您实现此目的的方法

<table *ngIf="columns">
    <thead> 
        <tr>
            <th *ngFor="let column of columns">{{column.header}}</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let column of columns">
            <td *ngFor="let row of column.rows">
                {{row.whatever}}
            </td>
        </tr>
    </tbody>
</table>

Answer 2

好的，让我结束这次讨论。我在控制器中执行此操作已解决了我的问题。这是我的代码：`StudentsDetails = [];

columns: string[] = [];

  constructor(private newService: StudentsService) { }

  ngOnInit() {
    this.newService.fetchData()
    .subscribe(responseStudentsDetails => {
      this.StudentsDetails = responseStudentsDetails;
      this.columns = Object.keys(this.StudentsDetails[0]);
    })
  };

Since StudentsDetails is my JSON array. I extract the keys from the StudentsDetails[0]. Then, I added the previous Wesley's code in my html file.

<table class="table table-bordered table-striped table-sm">
            <thead>
              <tr>
                <th *ngFor="let column of columns | filter : filter">{{column}}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let row of StudentsDetails | filter : filter | paginate: { itemsPerPage: items, currentPage: Page }">
                <td *ngFor="let column of columns | filter : filter">
                  {{row[column]}}
                </td>
              </tr>
            </tbody>
          </table>
          <div class="row">
            <div class="col-sm-4">
              <div class="row">
                <div class="col-sm-3">
                  <select class="form-control form-control-sm" id="page" [(ngModel)]="items">
                    <option>5</option>
                    <option>10</option>
                    <option>25</option>
                  </select>
                </div>
                <div class="col-sm-3">
                  <input type="text" [(ngModel)]="Page" class="form-control form-control-sm" id="page-no" placeholder="Page">
                </div>
              </div>
            </div>
            <div class="col-sm-8">
              <nav>
                <ul class="pagination">
                  <li class="page-item">
                    <pagination-controls (pageChange)="Page = $event"></pagination-controls>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <!--/.row-->

`因此我的问题是解决了。

如何通过* ngFor创建Angular Cli 4动态表。？

2 个答案: