角2はモデル変更後のビューを更新しません

Question

私はHTMLコードで2回のng-repeatを持っています。最初のものはリストから要素を追加または削除しますtipo_localidad、2番目は、

<table class="table table-style"> 
    <tr> 
     <th>Tipo de Localidad<a href="" style="float: right"><i class="fa fa-sort-desc" aria-hidden="true"></i></a> 
     </th> 
     <th>Eliminar </th> 
     <th> 
      <a (click)="addType('tipo destino')"> 
       <!-- Agregar --><i style="margin-right: 5px" class="fa fa-plus-circle fa-lg" aria-hidden="true"></i> 
      </a> 
     </th> 
    </tr> 
    <!--AngularJS --> 
    <tr *ngFor="let tipo of tipo_localidad; let n = index"> 
     <td> 
      <input type="text" class="form-control" name="" placeholder="Tipo de localidad" [value]="tipo" (focusout)="modType(n,tipo)" /> 
     </td> 
     <td><a (click)="deleteType(n)"><i style="margin-right: 5px" class="fa fa-times fa-lg" 
              aria-hidden="true"></i></a> 
     </td> 
    </tr> 
</table> 

と第二1：

この

は、最初のリストのためのコードである

<div class="dropdown"> 
    <label>Tipo Destino</label> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" [disabled]="!editionEnable"> 
     {{tipo_localidad[(locationDetail.tipoDestino-1)]}} 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li *ngFor="let tipo of tipo_localidad; let n = index"><a (click)="setType(n)">{{tipo}}}</a> 
     </li> 

    </ul> 
</div> 

私が追加または削除、二番目が正しく更新されない、それが追加されます実際に入力からテキストを追加するのではなく、デフォルトのテキスト 'new location'を使用して、フォーカスを失った後、入力からのテキストが更新されます。 私はまだ角度2に慣れているので、これはあまりにも明らかではないことがわかります。 どうすればこの問題を解決できますか？

部品コード：

export class ConfiguracionComponent implements OnInit { 


    selectedLocations: number[] = []; 
    editionEnable:boolean= false; // usado para editar campos 
    newLocation:boolean= false; //usada para determinar si es edicion de localidad o se agregara una nueva localidad 
    localidades: Configuracion[]; 
    locationDetail: Configuracion = new Configuracion; 

    tipo_localidad = ['Pueblo Mágico','Destino prioritario', 'Candidato a Pueblo Mágico']; 


    constructor(private configService: ConfigService) { 
    } 

    ngOnInit(): void { 
    this.fetch(); 

    } 



// fetch all locs 
fetch():void{ 
    this.localidades=[]; 
    this.configService.getAllLocations(); 
    this.configService.configChanged.subscribe((localidades: Configuracion[]) => this.localidades = localidades); 
} 

//para tipo de localidad 
    setType(i:number): void { 

     this.locationDetail.tipoDestino = i+1; 
    } 

    addType(tipo:string): void { 

    this.tipo_localidad.push(tipo); 

    } 

    deleteType(position_type:number): void { 

     this.tipo_localidad.splice(position_type,1); 
    } 


    modType(position_type:number,type:string): void { 

     this.tipo_localidad[position_type]=type; 
     this.tipo_localidad = this.tipo_localidad; 
    } 
} 

Answer 1

あなたは[(ngModel)]を使用して、あなたはvalueの値を渡す必要が、そうされていないので：

(focusout)="modType(n, $event.target.value)" 

Demo

EDIT：ちょうど実現私がFirefox上でプランナーを試したとき、これはうまくいかなかったので、(blur)は、代わりに：

(blur)="modType(n, $event.target.value)" 

しかし、あなたが入力値に[(ngModel)]を使用する場合は、リアルタイムで更新されますが、多分それはあなたが何をしたいのかではなく、代わりにfocusout/blurイベントをしたいです。