Html Angular 8表单控制加载列表时的冻结

嗨，我在angular中面临一个问题，就像我有一个页面，它有基本的angular表单，还有两个独立的组件，基本上是从API加载列表，比如评论[500+记录]，帖子[500+记录]

问题：

当试图在加载列表时向表单输入值时，基本上无法执行键/选中/取消选中/选择事件

在评论之后，仅加载的帖子页面允许在表单中执行操作

这是例外行为吗

我只想将加载列表（帖子、评论）这样的过程解耦，不应影响要输入的角度表单/html表单。

请帮我解决这个问题

我的stackblitz代码如下：

可在chrome[仅大数据集]/IE11中重现

尝试了

trackBy，异步管道

也没有任何帮助

---

我无法重现你闪电战中的冰冻状态。我相信它可能是隐藏的，因为加载指示器在该站点上处理代码的方式。但是，根据您的描述，问题似乎是DOM中500多个项的实际渲染（如果它处于冻结状态）。尝试查看角度变化检测策略：

---

我会尝试将两个列表组件的更改检测切换为OnPush，以查看是否存在差异。

我能够在IE中重现这种延迟

我对你的代码进行了重构，使其性能更好。如果你在处理大数据集和渲染大列表，除了TrackBue/Cuff>之外，还应该考虑使用<代码> CuxeDebug策略。OnPush < /C> >作为你的代码>变更检测策略< /代码> ./P> 以下是重构代码的外观：

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-comments',
  templateUrl: './comments.component.html',
  styleUrls: ['./comments.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CommentsComponent {
  comments$: Observable<Array<any>> = this.http.get(`https://jsonplaceholder.typicode.com/comments`);

  constructor(private readonly http: HttpClient) { }

  trackyFn(item) {
    return item.id;
  }

}

我所做的改变：

在所有组件中使用了

changeDetection:ChangeDetectionStrategy.OnPush，

。-当Angular执行较少的CD循环时，提高性能的主要因素

在模板中使用

async

，而不是分别从

可观察的
和
订阅中手动订阅和取消订阅只是为了让代码更干净

如果您是Windows用户，要查看性能是否得到改善，请在文本表单字段上按住键盘上的任意键，然后查看输入是否得到平滑反映

---

这是给你的裁判的一封信

---

不能繁殖的。我有一个减速网络速度高达50kbps和检查，但我能够访问表单。列表加载不会影响表单。@chintankotadiya您可以下载项目并尝试在本地运行，然后在IE11中打开应用程序。该问题将是可复制的。是否从

polyfills.ts中取消注释
IE
依赖项？@chintankotadiya问题将在两个浏览器中复制。与chrome一样，当记录太高（如1000+）时，它将清晰可见。但在IE中，它甚至会出现500多条记录。你可以下载该项目并尝试在本地运行，然后在IE11中打开一个应用程序。该问题将是可复制的。这是一个体面的解决方案！但是，如果我想在加载过程中使用一个加载程序/微调器来显示如何实现这一点，因为我不再可以在组件中使用
.subscribe（）
，我会使用通用的HttpInterceptor。鉴于async选项可用且更改检测策略设置为OnPush，请查看如何实现一个，对于特定模板，您可以放置*ngIf=“（comments$| async）.length>0；else showLoading”。最好在随后使用an
<h1>Comments</h1>
<div class="row">
    <div class="col-md-12" style="height: 250px; overflow:scroll">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Body</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let comment of comments$ | async; trackBy:trackyFn;">
                    <td>{{comment.id}}</td>
                    <td>{{comment.name}}</td>
                    <td>{{comment.email}}</td>
                    <td>{{comment.Body}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  name = 'Angular';
  registerForm: FormGroup;

  constructor(private readonly formBuilder: FormBuilder) { }

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      termsAgreed: [false],
      gender: ['male'],
      std: [10]
    });
  }

}