我在component.ts
中有一个执行以下服务的方法:
this._usuariosServices.listarPerfiles().subscribe(perfiles => {
this.perfilesList = perfiles;
this.perfiles = perfiles.map(item => {
return {
id: item.id,
text: item.nombre
};
});
});
通过这种方式我安装下拉列表SELECT2
现在在同一个组件ngOnInit()
中我预加载编辑视图的数据,如:
if (this.id != 0) {
this._usuariosServices.obtener(this.id).subscribe((usr: any) => {
usuarioJson = usr.json();
this.model.email = usuarioJson.email;
this.model.nombre = usuarioJson.nombre;
this.model.apellido = usuarioJson.apellido;
usuarioJson.empresas.forEach(element => {
var id = element;
this.checked.push(id);
});
console.log(usuarioJson);
usuarioJson.perfiles.forEach(element => {
var id = usuarioJson.perfilId;
console.log(element);
});
});
} else {
this.model = {};
}
// there is where I load selected one
numbreChanged(e: any) {
this.model.perfil = e.value;
}
所以所有字段都加载了正确的数据,除了select2字段,你可以看到我有:
numbreChanged(e: any) {
this.model.perfil = e.value;
}
但它总是加载第一个选项。我需要做的是加载当前的id值?当然,当这个条件成立时if (this.id != 0){
所以我尝试像其他字段一样做:this.model.perfiles = usuarioJson.perfilid;
但它仍然是第一个选项。
component.html:
<select2 [data]="perfiles" [width]="'100%'" (valueChanged)="numbreChanged($event)"></select2>
完整组件:
import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core";
import { Router, ActivatedRoute, Params } from "@angular/router";
import { ModalDismissReasons, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
import { ScriptLoaderService } from "../../../../../../_services/script-loader.service";
import { UsuariosService } from "../../../../../../_services/usuarios.service";
import { ToastrService } from "ngx-toastr";
import { Usuario } from "../../../../../../_models/usuarios";
@Component({
selector: "usuarios-detalles",
templateUrl: "./usuarios.detalle.component.html",
encapsulation: ViewEncapsulation.None
})
export class UsuariosDetalleComponent implements OnInit {
id: number = 0;
model: any = {};
usuario: Usuario;
empresasList: any[];
perfilesList: any[];
checked: Array<number> = [];
loading = false;
perfiles = [];
constructor(
private _script: ScriptLoaderService,
private _activatedRoute: ActivatedRoute,
private _usuariosServices: UsuariosService,
private _router: Router,
private toastr: ToastrService
) {}
ngOnInit() {
this.usuario = new Usuario();
this._activatedRoute.params.subscribe((params: Params) => {
this.id = params["id"];
});
var usuarioJson = null;
if (this.id != 0) {
this._usuariosServices.obtener(this.id).subscribe((usr: any) => {
usuarioJson = usr.json();
this.model.email = usuarioJson.email;
this.model.nombre = usuarioJson.nombre;
this.model.apellido = usuarioJson.apellido;
this.model.perfiles = usuarioJson.perfilId
usuarioJson.empresas.forEach(element => {
var id = element;
this.checked.push(id);
});
console.log(usuarioJson);
usuarioJson.perfiles.forEach(element => {
var id = usuarioJson.perfilId;
console.log(element);
});
});
} else {
this.model = {};
}
this._usuariosServices.listarPerfiles().subscribe(perfiles => {
this.perfilesList = perfiles;
this.perfiles = perfiles.map(item => {
return {
id: item.id,
text: item.nombre
};
});
});
}
updateChecked(option, event) {
if (event.target.checked) {
this.checked.push(option.id);
} else {
this.checked.forEach((item, index) => {
if (item === option.id) this.checked.splice(index, 1);
});
}
}
numbreChanged(e: any) {
this.model.perfil = e.value;
}
guardar() {
this.loading = true;
this.usuario.nombre = this.model.nombre;
this.usuario.apellido = this.model.apellido;
this.usuario.email = this.model.email;
this.usuario.perfilid = this.model.perfil;
this.usuario.empresas = [12];
debugger;
this._usuariosServices.guardar(this.usuario, this.id).subscribe(
data => {
if (this.id != 0) {
this.toastr.success("El registro se ha modificado correcatmente");
} else {
this.toastr.success("El registro se ha creado correctamente");
}
this.model = {};
this.loading = false;
this._router.navigate(["categorias/usuarios"]);
},
error => {
this.toastr.warning(error._body);
this.loading = false;
}
);
this.loading = false;
}
}
我怎样才能实现这一目标?此致