Question

我创建了一个下拉组件，它有一些我不理解的奇怪行为。多个下拉组件与[items] @Input()共享相同的引用。因此，当我添加标题时，标题会添加到相同的[items]数组。

*我刚刚意识到问题是什么，但感觉还是应该发布。

DropdownComponent.ts

@Component({
    selector: 'dropdown',
    templateUrl: './dropdown.component.html'
})
export class DropdownComponent implements OnInit {
    @Input() items: DropdownItem[];
    @Input() caption: string;

    ngOnInit() {
        this.items.unshift(new DropdownItem(undefined, this.caption));
    }
}

其他组件Html

<dropdown [input]="players" [caption]="'Player One'"></dropdown>
<dropdown [input]="players" [caption]="'Player Two'"></dropdown>

下拉列表的结果下拉列表

0. Player Two (caption)
1. Player One (caption)
2. Alex
3. John
4. Steve

为什么会这样？

Answer 1

基本上，两个下拉组件之间的players属性是相同的。我想象一个players的副本被传递到组件中，这是错误的。

解决此问题的两种方法：

在DropdownComponent
始终使用DropdownComponent

解决方案1 

@Component({
    selector: 'dropdown',
    templateUrl: './dropdown.component.html'
})
export class DropdownComponent implements OnInit {
    @Input() items: DropdownItem[];
    @Input() caption: string;

    ngOnInit() {
        this.items = this.items.slice();
        this.items.unshift(new DropdownItem(undefined, this.caption));
    }
}

解决方案2

<dropdown [input]="playersForPlayerOne" [caption]="'Player One'"></dropdown>
<dropdown [input]="playersForPlayerTwo" [caption]="'Player Two'"></dropdown>

Angular（Angular4）下拉组件@Input和ngOnInit问题

1 个答案: