时间戳

首页 > 解决方案 > 我有一个 JSON 数组，在角度 7 中有 4 个元素，但是当我询问它的长度时它显示为 0

arrays - 我有一个 JSON 数组，在角度 7 中有 4 个元素，但是当我询问它的长度时它显示为 0

问题描述

我有一个响应 JSON 对象请求的 API。一切看起来都很正常，但是当我想访问这个 JSON 数组的元素时，它显示 0 个元素而不是真值。

这是我的要求：

private request(type: 'getall'|'getonebyid'|'addnew'|'editbyid'|'deleteonebyid',
                  mp?: IMeasurementInterfaces,
                  id?: string): Observable<any> {
  let base;
  this.serverUri = 'http://localhost:3000'; // localhost

  if (type === 'getall') {
    base = this.http.get<MeasurementDetails[]>(`${this.serverUri}/mea/${type}`);
  }
  const request = base.pipe(
    map((data: any) => {
      return data;
    })
  );
  return request;
}

呼叫请求功能：

public getall(): Observable<MeasurementDetails[]> {
    return this.request('getall');
}

填充在component.ts文件中声明的mpserv：

this.mpserv.getall().subscribe(
  x => {
    x.forEach(element => {
      this.mp.push(element);
    });
  },
  err => console.error('Observer got an error: ' + err),
  () => console.log('Observer got a complete notification')
);

当我请求 console.log(this.mpserv) 时，它会响应：开发者模式

我使用 this.mp 作为数据表的数据源：

<div class="measurement-type-grid">
<div class="measurement-type-list">
<table mat-table [dataSource]="dataSource">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- title Column -->
  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef> title </th>
    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
  </ng-container>

  <!-- description Column -->
  <ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef> description </th>
    <td mat-cell *matCellDef="let element"> {{element.description}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <!-- Edit Column -->
  <ng-container matColumnDef="edit">
    <th mat-header-cell *matHeaderCellDef> Edit </th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button color="primary">
        <mat-icon aria-label="Edit data">edit</mat-icon>
      </button>
    </td>
  </ng-container>

  <!-- Delete Column -->
  <ng-container matColumnDef="delete">
    <th mat-header-cell *matHeaderCellDef> Delete </th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button color="primary">
        <mat-icon aria-label="Delete data">delete_forever</mat-icon>
      </button>
    </td>
  </ng-container>

  <!-- Add New Column -->
  <ng-container matColumnDef="add new">
    <th mat-header-cell *matHeaderCellDef> Add New </th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button color="primary">
        <mat-icon aria-label="Delete data">add_circle</mat-icon>
      </button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
</div>

我使用此函数将数据填充到数据源：

filltoelements(mdata: MeasurementDetails[]) {
// console.log(mdata);
if (!mdata) {
  console.log('data is undefined!!!!');
} else {
  let i: number;
  i = -1;
  mdata.forEach(element => {
    i++;
    this.ELEMENT_DATA[i].position = i + 1;
    this.ELEMENT_DATA[i].title = element.measureTitle;
    this.ELEMENT_DATA[i].description = element.measureDescription;
    this.ELEMENT_DATA[i].symbol = element.measureSymbol;
    this.ELEMENT_DATA[i].edit = 'edit';
    this.ELEMENT_DATA[i].delete = 'delete';
    this.ELEMENT_DATA[i].addNew = 'addNew';
  });
}
}

我在component.ts中定义了它：

displayedColumns: string[] = ['position', 'title', 'description', 'symbol', 'edit', 'delete', 'add new'];
dataSource = new MatTableDataSource<MeasureTypeElemetns>(this.ELEMENT_DATA);

并返回 0 作为数组长度，我的数据表为空：

数据表

你有什么主意吗？

标签： arraysjsonangular

解决方案

感谢 pjlamb12、Gilsdav 和 AjayReddy。

我应该在订阅方法中做到这一点。所以我的代码应该是这样的：

  this.mpserv.getall().subscribe(
    x => {
      x.forEach(element => {
        this.mp.push(element);
      });
      this.filltoelements(this.mp);
    },
    err => console.error('Observer got an error: ' + err),
    () => console.log('Observer got a complete notification')
  );

然后它工作正常。

推荐阅读