CODEWITHSUNDEEP
htmlangular
Progs
Progs

Reputation: 737

Angular 2 not updating view after model changes

I have two ng-repeat in my html code, the first one adds or deletes elements from a list tipo_localidad, the second one is used to asign one type of those elements to an object.

this is the code for the first list:

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

and the second one:

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

When i add or delete, the second one doesn't update correctly, it adds an element but with the default text 'new location' instead of actually adding the text from the input. The text from the input should update after losing focus. I'm still getting used to angular 2, so this is may not be too obvious for me to spot the error. How i can fix this behaviour?

component code:

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

Upvotes: 3

Views: 1742

Answers (1)

AVJT82
AVJT82

Reputation: 73357

Since you are not using [(ngModel)], you need to pass the value of value, so:

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

Demo

EDIT: Just realized when I tried the plunker on Firefox, this didn't work, so use (blur) instead:

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

But if you would use [(ngModel)] on the input values would be updated in real-time, but maybe that is not what you want to do, and want a focusout/blur event instead.

Upvotes: 3

Related Questions