Angular4 3 수준의 사용자 지정 구성 요소, 손자 (ngModelChange)는 항상 내가 템플릿이가있는 최상위 요소가 같은 조부모

Question

보고 :

<cw-card-list [cards]="cards"> 
    </cw-card-list> 

가능한 신용 카드는 API에서 채워을 때 구성 요소로드 :

<div *ngFor="let card of cards; let i = index"> 
    <cw-card-list-item 
     [card]="card" [index]="i"> 
    </cw-card-list-item> 
    </div> 

수 있습니다 se :

는

private getCards(): void{ 
    this._cardService.getCards().subscribe(
     result => { 
     this.cards = result; 
     } 
    ); 
    } 

카드 목록 구성 요소는 매우 기본적인

export class CardListItemComponent implements OnInit, AfterViewInit { 
    @Input() card: Card; 
    @Input() index: number; 
... 

마지막으로,이 목록 항목의 각 요소도 아이가 : 목록에있는 각 카드가 카드 목록 항목의 자녀에 입력 전자

<cw-checklist-show [template]="card.template" 
</cw-checklist-show> 

export class ChecklistShowComponent implements OnInit { 
    @Input() template: Template 
... 

모든 작업, 모든 데이터가 표시됩니다.

이

<div *ngFor="let child of template.template_items; let i=index"> 
      <input id="checkbox-{{i}}" type="checkbox" 
      [ngModel]="child.is_completed" 
      (ngModelChange)="onItemIsCompletedChange(i)"> 
</div> 

제 (ngModelChange) 이벤트가 화재 때마다 항상 개정 :

그러나이 마지막 구성 요소 내의 아이의 'is_completed'속성 (A TemplateItem)에 바인딩 된 체크 박스가있다 템플릿의 첫 번째 카드의 'is_completed'속성이 클릭 한 것이 아니라 목록에 있습니다.

왜 그런 일이 발생합니까? 부모와 콘솔에 출력 이벤트를 연결하려고 시도해도 템플릿을 기록했습니다. 그리고 카드 목록 배열에 항상 같은 템플릿, 항목 [0]이 표시됩니다.

하지만 console.log this.cards 할아버지 할아버지의 경우, 올바른 템플릿이 각 카드에 첨부 된 것을 보여줍니다!

데이터 구조

각 카드 이런 주형 가지고 각 템플릿 TemplateItem 배열을 갖는다

import { Template } from './template'; 
export class Card { 
    constructor() { 
    } 

    public id: string 
    public customer_id: string 
    public template: Template 
    public follow_up: Date 
    public is_new: boolean = true 
} 

을 :

import { TemplateItem } from './template-item'; 

export class Template { 
    constructor(
) {} 

    public id: string 
    public account_id: string 
    public name: string 
    public template_items: Array<TemplateItem> 
    public template_type: string 
    public status: string 
} 

각 TemplateItem이 같다 :

export class TemplateItem { 
    constructor(
) {} 

    public id: string 
    public template_id: string 
    public sort: number 
    public content: string 
    public item_type: string 
    public is_completed: boolean = false 
} 

Answer 1

저는 모델 구동 양식을 작성하는 데 익숙하다면 그 사실을 즉시 알 수는 없지만 입력 ID가 중요합니다. 내 입력 이후

는 INDEX를 사용하고, 내 페이지의 체크 박스가 서로 다른 ID를 가지고 있지 않은 것을 의미한다 :

checkbox-{{i}} 

이 그것을 클릭하면 항상 첫 번째 카드의 체크 박스에 이벤트를 (화재 것을 의미한다 checkbox-0, checkbox-1) 분명히 각 손자 (TemplateItem)는 0 ... n의 배열입니다.

그래서 솔루션입니다 :

 <input id="checkbox-{{child.id}}-{{i}}" type="checkbox" 
     [ngModel]="child.is_completed" 
     (ngModelChange)="onItemIsCompletedChange(i)"> 

지금 각 체크 박스는 손자 TemplateItem의 ID로 특정 고유 ID를 가지고 있습니다.