2017-02-17 3 views
0

저는 각도 2를 배웠습니다. 바인딩 할 속성의 이름을 정적으로 지정하지 않고 ngModel을 사용하여 양식을 만드는 것이 해결할 수 없었던 한 가지 문제가 있습니다.ngModel을 사용하여 값을 일반적으로 바인딩

이 문제를 극복하기위한 메커니즘이 확실하지 않지만 (필자는이 인터페이스가 충분히 일반적이라고 확신하지만) 커뮤니티 내에서 어떻게 언급되는지는 확실합니다.

내 템플릿 에 키와 값을 표시하지만 저장시 업데이트를 반영하지 않습니다. 동적 인 방식으로 속성을 참조하는 것이 바인딩을 잃게 만듭니다. (이 데이터를 배관하기 전에 바인딩 속성을 평가인가?)

여기

내가 붙어있는 곳입니다 :

템플릿 :

<table class="table table-responsive"> 
    <tr *ngFor="let prop of account | keyValues"> 
    <td>{{ prop.key }}</td> 

    // Problem here: 
    // if I have [(ngModel)]="prop.key", it only displays the keys 
    // if I sub in a static attribute e.g. [(ngModel)]="account.accountName" it works 
    <td><input name="{{prop.key}}" [(ngModel)]="prop.value" /></td> 
    </tr> 
</table> 

파이프 :

@Pipe({ 
    name: 'keyValues' 
}) 
@Injectable() 
export class KeysPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
    let keys = []; 
    for (let key in value) { 
     keys.push({key: key, value: value[key]}); 
    } 
    return keys; 
    } 
} 

구성 요소 :

... boiler plate ... 

    save(): void { 
    this.accountsService.update(this.account) 
     .then(() => this.goBack()); 
    } 

    ... 

답변

0

대답은 Angular 's를 사용하는 것입니다. Dynamic Forms

또한 PrimeFaces의 PrimeNG의 편집 가능한 데이터 테이블과 같은 특정 라이브러리를 활용할 수 있습니다.

관련 문제