Question

我正在研究在UI上获取列表的代码，但是该列表的加载速度非常慢。数据来自.NET Core2 API。编写此代码以避免列表加载延迟的更好方法是什么？

service.ts
--------------------
public getMyList(): Observable<IMyList[]> {
    const headers = new HttpHeaders({
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    });

    return this.http.get(this.url + '/list', { headers }).pipe(
      map((result: IMyList[]) => {
        if (result && Object.keys(result).length > 0) {
          return result;
        } else {
          return [];
        }
      })
    );
  }

component.ts
--------------------
public myList: IMyList[] = [];


public getMyList(): void {
    this.service.getMyList().subscribe(
      (result: IMyList[]) => { this.myList = result; }
    );
  }

component.html
----------------------------------------
    <tr class="tableRow" *ngFor="let list of myList = index">
      <td class="orgCell">{{list.col1}}</td>
      <td>{{list.col2}}</td>
      <td>
        <label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
        &nbsp; {{code.col5 === true ? 'In use' : 'Not used'}}
      </td>
    </tr>

Answer 1

map((result: IMyList[]) => {
        if (result && Object.keys(result).length > 0) {
          return result;
        } else {
          return [];
        }
      })

这是错误的地图操作员用法。 Map函数通过转换函数传递每个源值，以获得相应的输出值。了解更多here

我认为您的代码应该看起来像

service.ts
--------------------
public getMyList() {
    const headers = new HttpHeaders({
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    });

    return this.http.get(this.url + '/list', { headers });
  }

component.ts
--------------------
public myList: Observable<IMyList[]> = of([]);


public getMyList(): void {
    this.myList = this.service.getMyList().pipe(
      map(item => { return item; })
    );
  }

component.html
----------------------------------------
    <tr class="tableRow" *ngFor="let list of myList | async; let i = index;">
      <td class="orgCell">{{list.col1}}</td>
      <td>{{list.col2}}</td>
      <td>
        <label [ngClass]="{'cellStatusInUse':list.col5,'cellStatusNotInUse' : !list.col5}"></label>
        &nbsp; {{code.col5 === true ? 'In use' : 'Not used'}}
      </td>
    </tr>

此外，您应该从服务器收到一个空数组，而不是null或undefined

Answer 2

我认为代码很简单，应该不会引起任何问题。问题在于您的后端以及如何显示您的代码。

您可以检查上面提到的Web API上的代码吗？如果加载时间太长，您可以采取任何措施来改善API性能。
如果数据太多。例如10.000行。您应该在Web API上进行分页。在前端，您可以添加无限滚动功能。它将大大增加加载时间。

滞后后数据正在UI上加载

2 个答案: