Question

我有两个嵌套的*ngFor循环，一个循环遍历库，另一个迭代遍历此库的所有项目，每个项目都有一个角度组件。

现在的问题是，每次对angular进行更改检查都会重新创建这些项组件，我注意到将logger放入item组件的ngOnInit()处理程序中。每当我更改页面上的任何内容时，都会调用此记录器，导致组件的状态被重置并且对它的所有更改都会丢失，因此我无法修改组件的状态，这会完全破坏我的应用程序的功能。

我尝试使用trackBy: trackByFn来解决这个问题，但这也没有帮助。

容器：

<div *ngFor="let lib of libraries">
  <div *ngIf="lib.components.length" class="groupContainer" [class.closed]="!libraryIsOpened(lib)">
    <div class="title flex flex-row" (click)="toggleLibrary(lib)">
      <p>{{ lib.name === '__none' ? 'No Library' : lib.name }} ({{ lib.components.length }})</p>
      <div class="flex flex-grow"></div>
      <i class="mdi mdi-chevron-up iconClose"></i>
      <i class="mdi mdi-chevron-down iconOpen"></i>
    </div>
    <div class="content">
      <app-component-list-item *ngFor="let c of components; trackBy: trackByFn"
                     class="flex"
                     [component]="c">
      </app-component-list-item>
    </div>
  </div>
</div>

列出项目：

import ...


@Component({
  selector: 'app-component-list-item',
  templateUrl: './component-list-item.component.html',
  styleUrls: ['./component-list-item.component.scss']
})
export class ComponentListItemComponent implements OnInit {

  @Input() component: PipelineComponent

  constructor(private el: ElementRef, private nodeCreator: NodeCreationService) {
  }

  ngOnInit() {
    console.log('init')
  }

  trackByFn(index, item) {
    return this.component.componentID
  }
}

Answer 1

如果没有看到更多代码，很难确定。但我怀疑它是因为libraries正在改变（你使用的是Redux吗？需要顶级libraries列表才能更改任何元素或元素的属性已更改），因此Angular变化检测发现它已经改变了（并且不够聪明，不知道里面的元素是相同的），因此为每个元素重新创建新的组件。如果是这种情况，那么你应该在父组件中存储一个可变的库副本，并在原地进行更改，这样Angular就不会认为当一个元素发生变化时整个事物已经发生了变化。

Angular 2 * ngFor在每次更改检查时重新创建组件

1 个答案: