ngModel에 Select를 사용하여 Angular * ngFor에 예기치 않은 바인딩이 있습니다.

Question

저는 건물 업계의 사용자를위한 동적 양식을 만듭니다.이 양식은 각 층의 건물에 대한 입력을 층 단위로 분석합니다. 같은 :

1. 사용자가 처음에 한 층 양식에 대한 양식이 제공하지만, 별도의 층을 추가 할 수있는 옵션이 제공됩니다 :

2. 우리는 별도의 층의 수를 추가 할 수 있어야한다, 원하는 경우 특정 층을 삭제할 수 있습니다.

방법

, 내가 * ngFor을 활용하고 배열에있는 각 개체에 바인딩 ngModel를 사용하여 데이터에 걸릴 배열을 반복하기 위해 노력하고있어이 작업을 수행합니다.

component.html

<form *ngFor = "let storey of storeyData; let i = index; trackBy: trackByFn(i)"> 
    <md-select placeholder="Floor type" name ="floorTypeSelector{{i}}" [(ngModel)]="storeyData[i].floorTypes[0]"> 
     <md-option *ngFor="let floorType of floorTypes" [value]="floorType.value"> 
      {{floorType.viewValue}} 
     </md-option> 
    </md-select> 

<button md-raised-button (click)="incrementStoreyNumber()"> 
    <md-icon>library_add</md-icon> 
    Add storey 
</button> 

component.ts

export class FloorDetailsFormComponent implements OnInit { 

selectedFloorType = []; 
floorTypes = [ 
{value: 'concreteSlab', viewValue: 'Concrete slab'}, 
{value: 'suspendedTimber', viewValue: 'Suspended timber'}, 
{value: 'suspendedSlab', viewValue: 'Suspended slab'}, 
{value: 'wafflePod', viewValue: 'Waffle pod'} 
]; 

storeyData = [{floorTypes: [],floorAreas:[] }]; 
storeyDataTemplate = {floorTypes: [], floorAreas:[]}; 

incrementStoreyNumber(){ 
    this.storeyData.push(this.storeyDataTemplate); 
} 

trackByFn(index){ 
return index; 
} 
constructor() { } 
ngOnInit() { 
} 

문제

은 처음 두 층은 다소의 선택된 값을 변경 정확하게 그 변수에 결합 보인다 2 층부터 n 층까지는 모든 층을 변경합니다 (첫 번째 층 제외).

비슷한 문제에 대한 다른 게시물을 검색 한 후에도 왜 이런 일이 발생했는지에 대해서는 여전히 분실 상태입니다. 다른 사람들이 가지고있는 한가지 문제점은 * ngFor 루프의 반복마다 구분되지 않고 내 console.log를 보았을 때 인덱싱 된 각 요소의 이름을 볼 수 있다는 것입니다.

필자가 보았던 흥미로운 점은 typesy 파일 배열에서 n 개의 storeys 길이로 storeyData 배열을 확장하면 모든 독립 변수가 n 개의 모든 독립 변수에 바인드되고 모든 storeys n 나중에 추가되는 +1에는 동일한 문제가 있습니다.

trackBy 기능을 사용해 보았지만이 기능을 사용할 수없는 것 같습니다. 나는 비행 중에 * ngFor 범위를 확장하려고 할 때 후드 아래에서 진행되는 작업에 대한 이해가 부족합니다. 아마도 이것은 나쁜 습관일까요? 당신은 내가 매우 감사하게 될 거라고 여기 좀 도와 수 있다면 (그 경우에도 "이봐, 에 읽어이")

Answer 1

문제는이 라인에 있습니다

this.storeyData.push(this.storeyDataTemplate); 

추가 storeyDataTemplate storeyData에 푸시 할 때마다 바운드되는 동일한 객체이고 ngFor는 동일한 객체를 추적합니다. 다음으로 변경하는 경우 :

this.storeyData.push({floorTypes: [], floorAreas:[]}); 

으로 변경하십시오. 여기에 내 대답은 밖으로

DEMO