Angular 如何等到长文本完全显示？

Question

我的问题是我想显示一个文本，如果它很短就没有问题，但是当文本太长时，它会跳一些句子。 所以我需要添加一个等待时间，直到它被正确打印出来，但我不知道如何，因为我是 Angular 和 TypeScript 的新手。 我已阅读有关setTimeout但不知道如何将其实现到我需要它的部分。 <p>{{longText}}</p>

如果可以的话，尽可能多地解释。

Answer 1

你可以做这样的事情。

下面的演示渲染了 5000 行数据；

现场演示 - 加载表

以下演示呈现数据 > 5 MB 的数据。

现场演示 - 加载字符串数据

ts

  isLoading = false;
  data;

  constructor(private http: HttpClient) {}

  loadData() {
    this.isLoading = true;
    this.http.get('https://jsonplaceholder.typicode.com/photos').subscribe(
      (res) => { this.data = res; },
      (err) => {},
      () => { this.isLoading = false; }
    )
  }

html

<p *ngIf="isLoading">Loading..</p>

<table style="width:100%" *ngIf="data && !isLoading">
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr *ngFor="let val of data">
    <td>{{val.id}}</td>
    <td>{{val.title}}</td>
    <td>{{val.url}}</td>
  </tr>
</table>

Answer 2

根据异步调用行为，首先将解析数据，然后仅更新视图。 当然，你的模板应该正确绑定*ngIf条件。

我已经更新了@hbaithkumara 共享的代码。

我认为加载器是一个很好的用于用户反馈目的的插件，但你想在这里了解的基本内容是加载一个{{longText}} （长文本/数据）。

模板

<td>{{val?.id}}</td>
<td>{{val?.title}}</td>
<td>{{val?.url}}</td>

TS

export class AppComponent  {
  name = 'Angular';;
  data;
  loading = true;

  constructor(private http: HttpClient) {
    this.loadData();
  }

  loadData() {
    this.http.get('https://jsonplaceholder.typicode.com/photos').subscribe( res => {
      this.loading = false;
      this.data = res;
    })
  }

}

• 演示（预览）： https : //sof-q-59029627.stackblitz.io/
• 演示（编辑）： https : //stackblitz.com/edit/sof-q-59029627