1

Angular2 で ngModel を使用してインライン編集を実装しようとしています。ngFor を使用して反復する必要があり、ngModel も使用する配列があります。この配列にインライン編集を適用しようとすると、配列の変数ごとに 1 文字しか編集できません。

ここで実際の例を見つけることができます。

ngModel と ngFor を一緒に使用しているコンポーネントのコードは次のとおりです。

import {Component} from '@angular/core'
import {InlineEditComponent} from './inline.component';
@Component({
  selector: 'inline-app',
  providers: [],
  template: `
    <div>
      <h2>Inline Editing with Angular 2</h2>
      <inline-edit [(ngModel)]="editableText" (onSave)="saveEditable($event)"></inline-edit>
    </div>
    <div>
      <ul style="margin:5px;">
      <li ngFor #arr [ngForOf]="array" [ngForTrackBy]="customTrackBy">
      <inline-edit [(ngModel)]="arr" (onSave)="saveEditable($event)"></inline-edit>
   </li>
        // <li style="margin:5px;" *ngFor="let arr of array ; let i=index">
        //   <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit>
        // </li>
      </ul>
    </div>
  `,
  directives: [InlineEditComponent]
})
export class InlineApp {
customTrackBy(index: number, obj: any): any {
    return index;
  }
  editableText = "Click to edit me!";
  // Save name to the server here.  
  saveEditable(value){
      console.log(value);
  }
  array=['bmw','benz','honda'];
}

誰かが私を助けることができれば、それは素晴らしいことです.

4

3 に答える 3

0

これは tamplate で変更する必要があります。

<ul>
            <li style="margin:5px;" *ngFor="let arr of array ; let i=index; trackBy:customTrackBy">
            <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit>
            </li>
</ul>

この関数は、クラスに追加する必要があります。

export class{

customTrackBy(index: number): any {
    return index;
  }
}

最終的な作業コード:
https://plnkr.co/edit/7SSpZDec2N2zjrSUM04X?p=preview

于 2016-07-06T19:00:30.917 に答える
0

テンプレート変数ではなく、配列アイテムに直接バインドできます。

<li *ngFor="let arr of array; let idx=index; ngForTrackBy:customTrackBy">
      <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit>

ところで、構文はタグngForでのみ使用できます。<template>他の要素で使用する場合は、上記の構文が必要です。

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngForも参照してください

于 2016-07-06T05:00:35.203 に答える