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

Question

I created a dropdown component that has some strange behavior that I do not understand. Multiple dropdown components share the same reference to the [items] @Input() . So when I add a caption, the caption adds to the same [items] array.

*I just now realized what the problem is but feel like I should still post.

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));
    }
}

Other Component Html

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

Resulting Dropdown List for both dropdowns

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

Why is this happening?

Answer 1

Basically, the players property is the same between both dropdown components. I was imagining a copy of players being passed into the component, which is wrong.

Two ways to fix this:

1. Make a copy of the array in DropdownComponent
2. Always create copies of arrays in the component using DropdownComponent

Solution 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));
    }
}

Solution 2

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