获取当前值以显示在编辑视图的组件中

时间:2018-06-08 16:51:24

标签: angular components jquery-select2

我在component.ts中有一个执行以下服务的方法:

this._usuariosServices.listarPerfiles().subscribe(perfiles => {
      this.perfilesList = perfiles;
      this.perfiles = perfiles.map(item => {
        return {
          id: item.id,
          text: item.nombre
        };
      });
    });

通过这种方式我安装下拉列表SELECT2 enter image description here

现在在同一个组件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;
  }
}

我怎样才能实现这一目标?此致

0 个答案:

没有答案