Question

我的html代码中有两个ng-repeat，第一个添加或删除列表tipo_localidad中的元素，第二个用于将这些元素的一种类型指向对象。

这是第一个列表的代码：

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

Answer 1

由于您未使用value，因此您需要传递(focusout)="modType(n, $event.target.value)"的值，因此：

(blur)

Demo

编辑：刚刚意识到当我在Firefox上尝试使用plunker时，这不起作用，所以请改用(blur)="modType(n, $event.target.value)"：

[(ngModel)]

但是如果您使用dbal executeQuery method输入值会实时更新，但可能不是您想要做的，而是想要焦点/模糊事件。

Angular 2在模型更改后未更新视图

1 个答案: