2017-02-17 4 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のものですDynamic Forms

PrimeFacesのPrimeNGの編集可能なデータテーブルのような特定のライブラリを活用することもできます。

関連する問題