Angular 2不更新模型更改后的视图

我在我的html代码中有两个ng-repeat，第一个添加或删除列表中的元素tipo_localidad，第二个用于将这些元素的一种类型对准一个对象。Angular 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>

，第二个：

<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>

当我添加或删除，第二个不正确地更新，它增加了一个元素，但使用默认文本“新位置”，而不是实际添加输入中的文本。失去焦点后，输入文本应该更新。我仍然习惯了角度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; 
    } 
}

来源

2017-02-23 B.J. A.A.

你能告诉我们添加/删除代码吗？ – rinukkusu

@rinukkusu完成 –

既然你不使用[(ngModel)]，你需要传递的value价值，所以：

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

Demo

编辑：刚刚意识到当我尝试在Firefox上运行时，这不起作用，所以请使用(blur)改为：

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

但是如果你会在输入值使用[(ngModel)]将实时更新，但也许这是不是你想要做什么，并希望事件的内容/模糊的事件来代替。

来源

2017-02-23 17:18:40 Alex

Angular 2不更新模型更改后的视图

回答

相关问题