Angular 4.4.3 组件使用带有对象数组的@input 导致浏览器不respond/initialize

Question

我正在尝试构建一个新组件，该组件在其模板中使用两个 material 设计组件。我的想法是我将有一个新组件，在从 md-select 中 selecting 一个项目时会将该项目添加到 md-chip-list，然后清除 select 并允许您可以将其他项目添加到 md-chip-list。

该组件应该采用一个 optionsList，它是一个对象数组，例如：

[{ viewValue: "Eve",value:"E" }, { viewValue: "Bob", value:"B" }, { viewValue: "Alice", value:"A" }]

组件和模板如下所示。

import { Component, OnInit, Inject } from '@angular/core';
import { Input } from '@angular/core';


@Component({
    selector: 'chip-set-select',
    templateUrl: './ChipSetSelect.component.html',
    styleUrls: ['./ChipSetSelect.component.scss']
})

export class ChipSetSelectComponent implements OnInit {
    @Input() optionList: any[];//TODO can we use generic instead of any? Really we want all these arrays to be of the same type, but we don't know the type in advance.
    //optionList: any[];//TODO can we use generic instead of any? Really we want all these arrays to be of the same type, but we don't know the type in advance.
    @Input() selectedItems: any[];
    selectValue: any;

    // Use "constructor"s only for dependency injection
    constructor() { }

    // Here you want to handle anything with @Input()'s @Output()'s
    // Data retrieval / etc - this is when the Component is "ready" and wired up
    ngOnInit() {
        //this.optionList = ["Susan", "Bob", "Alice"];
        //this.optionList = [{ viewValue: "Susan",value:"S" }, { viewValue: "Bob", value:"B" }, { viewValue: "Alice", value:"A" }];
    }
}

{{optionList}}
<div *ngFor="let option of optionList">value: {{option.value}} viewValue: {{option.viewValue}}</div>
<md-select class="fullWidth" placeholder="Select Funder(s)" [(ngModel)]="selectValue">
  <md-option *ngFor="let option of optionList" [value]="option.value">
    {{option.viewValue}}
  </md-option>
</md-select>
{{selectValue}}
<md-chip-list><md-chip *ngFor="let item of selectedItems">{{item}}</md-chip></md-chip-list>

当我使用如下组件时：

<chip-set-select [optionList]="getOptionList()" [selectedItems]="getSelectedFunders()"></chip-set-select>

在 select 列表显示已填充之前，事情最终挂起。 *ngFor 或 let 声明可能存在的问题？浏览器控制台中没有出现错误。

奇怪的是，如果我删除 optionList 属性并删除组件中的 @input 并测试在组件的 ngOnInit 期间初始化的相同对象数组，select 列表会按预期填充，即使它完全相同对象数组。

同样，如果我使用字符串数组传递到 [optionList] 并相应地修改其他代码...一切都可以用字符串值填充 select 选项。

知道出了什么问题，或者为什么单独工作的元素在组成最终产品时会导致问题吗？

Answer 1

我在尝试 diagnose/fix 非常相似的问题时偶然发现了这个问题。在我的例子中，浏览器也冻结了。这是无限循环的典型症状！一个事件导致另一个事件触发。我没能准确找到它发生的位置，但在修复后解决了它（类似于你的）。

函数调用似乎是导致循环的罪魁祸首。将功能调用替换为对 array/object 的引用。使用两个单独的 lists/array 来存储选项和 select 离子。前任。 options[] 用于 select 选项，chips[] 用于存储 selected 选项。每当 selected 一个选项时，都会调用一个函数（add？）来将该项目添加到 chips[]。添加后 chips[] 将再添加一个 chip 并将反映在 UI.

上

Angular 4.4.3 组件使用带有对象数组的@input 导致浏览器不respond/initialize

Angular 4.4.3 component using @input with array of objects causing browser to not respond/initialize

angular-material

angular-components

angular