如何將 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>