2

Angular 2 でバグを見つけたかもしれないし、見つけなかったかもしれません。ユーザーが選択したアイテムを継続的に追加できるようにします。

だから私がしたいのは、下部の選択ボックスを空の値にリセットすることですが、ngModel の値を 0 (または空) に戻そうとしても、下部の選択ボックスは以前に選択したオプションのままです。

@Component({
    selector: 'my-app',
    template: `
    <div *ngFor="let a of arr">
        <div *ngFor="let b of a.entities;let i = index">
            <select class="form-control input-sm" [(ngModel)]="a.entities[i]">
                <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
            </select>
        </div>
        <select class="form-control input-sm mb5" (change)="entitySelect(a)" [(ngModel)]="a.selected">
            <option value="0">- Select -</option>
            <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
        </select>
    </div>
    `,
})
export class App {
    items:Array<string> = ['red','green','blue'];
    constructor() {
        this.arr = [{
            entities: [],
            selected: 0
        }]
     }
     entitySelect(entity) {
         entity.entities.push(entity.selected);
         entity.selected = 0; // Revert bottom select box back to empty
     }
}

https://plnkr.co/edit/PMzbgEtyd4DFhObu1UVz

もう1つの奇妙な点は、entity.selectedを0ではなく「青」に設定すると、最後の選択ボックスがデフォルトで青になりますが、最初の選択でのみです。それ以降の選択は、前のものと同じままです。

https://plnkr.co/edit/Ze5uS1JjAmI7QXjQ17kQ

4

1 に答える 1

3

予測できない/Angular が最初に処理されるアクションを制御できないため、イベントで双方向データバインディング ( [(ngModel)])を使用することは非常に悪い考えです。(change)そのため、関数を書き直して、entitySelect値を手動で に割り当てる必要がありますentity\a。2番目のポイントにはまったく同じ理由があります...私にとってうまくいく例：

@Component({
selector: 'my-app',
template: `
    <div *ngFor="let a of arr">
        <div *ngFor="let b of a.entities;let i = index">
            <select class="form-control input-sm" [(ngModel)]="a.entities[i]">
                <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
            </select>
        </div>
        <select class="form-control input-sm mb5" (change)="entitySelect($event, a)" [ngModel]="a.selected">
            <option value="0">- Select -</option>
            <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
        </select>
    </div>
`,
})
export class App {
    name:string;
    items:Array<string> = ['red','green','blue'];
    constructor() {
        this.name = 'Angular2'
        this.arr = [{
            entities: [],
            selected: 0
        }]
    }
    entitySelect($event, entity) {
        entity.entities.push($event.target.value);
        $event.target.value = 0;
    }
}
于 2016-12-15T21:17:39.267 に答える