如何将 ngOptionValue 设置为我的 ng-option？

Question

因此，我更新了我的选择/选项代码以使其可搜索，但现在它因此破坏了我创建的功能。

HTML 代码：

    <div class="input-group">
        <label htmlFor="categoria" class="sr-only"> Categoría:</label>
        <ng-select [disabled]="vista === vistas.DETALLE" class="custom-select w-100 my-2 form-control-lg mb-lg-0" title="category" type="text" id="cat" name="categoria" #categoria [(ngModel)]="asignatura.categoriaId"  placeholder="Categorías">
          <ng-option *ngFor="let c of categorias" name="ca" [ngValue]="c.id" >{{c.nombre}}</ng-option>
        </ng-select>
      </div>

代码：

comprobacion(): boolean{
    return (this.asignatura.tipo         !== undefined &&
            this.asignatura.tipo         !== ''        &&
            this.asignatura.categoriaId  !== undefined &&
            this.asignatura.codigo       !== undefined &&
            this.asignatura.codigo       !== ''        &&
            this.asignatura.descripcion  !== undefined &&
            this.asignatura.descripcion  !== ''        &&
            this.asignatura.formato      !== undefined &&
            this.asignatura.formato      !== '');
  }


  fnCrear():void{
      this.asignatura.activa = true;
      this.categoria = this.asignatura.categoria; 
      if (!this.comprobacion()) {
        this.msgError = "Por favor, rellena todos los datos necesarios.";
        return;
      }
  
      this.msgError = undefined;
      this.asignaturasService.createAsignatura(this.asignatura)
        .subscribe(res => {
          this.router.navigate(['/asignaturas']);
          this.toastr.success("Creado correctamente", this.asignatura.tipo, { progressBar: true });
        },
        err => this.toastr.error("Ha ocurrido un error al intentar registrar la asignatura."));
    }

当我的 html 代码带有选项和 select 而不是 ng-option 和 ng-select这些是 object 的值（如您所见，categoriaId 有一个数字值），但现在我获得了这些值。 我一直在 inte.net 上搜索这个，但没有任何线索（我对 angular 很陌生，我对此一头雾水......）

谢谢

Answer 1

指令ngValue对ng-select库无效，请改用value 。

所以这：

<ng-option *ngFor="let c of categorias" name="ca" [ngValue]="c.id" >{{c.nombre}}</ng-option>

变成这样：

<ng-option *ngFor="let c of categorias" name="ca" [value]="c.id" >{{c.nombre}}</ng-option>

Answer 2

如果您将 ng-select 用于 angular 2+，您应该使用属性 bindValue。 此外，如果您想使用带有选项的自定义模板。 你应该像这样使用 ng-template。

       <ng-select [items]="statusItems" bindLabel="title" bindValue="value">
        <ng-template ng-option-tmp let-item="item">
          <span>{{item.title}}</span>
        </ng-template>
      </ng-select>