Angular8 SELECT and OPTION - Невозможно выбрать один вариант

Question

Я занимаюсь разработкой приложения с угловой 8, и я совсем новый. У меня есть класс, который имеет другой связанный класс. В этом случае у PLU ИМЕЕТСЯ АССОЦИИРОВАННЫЙ ОТДЕЛ В моей форме я использую «SELECT», но у меня много проблем. Существует только один «.html» для добавления и обновления PLU, поэтому это та же страница.

В моем .TS

    @Component({
      selector: 'app-plu',
      templateUrl: './plu.component.html',
      styleUrls: ['./plu.component.css'],

    })

    export class PluComponent implements OnInit {
      public departamentos: Departamento[];
      public plu: PLU;
      public departamentoSeleccionado: Departamento; //Is null on init

    ///...more variabes
    ngOnInit() {

        this.route.params.subscribe( (pluSingle) => {
            this.cargarPLU(pluSingle.id);
          });
      }


    cargarPLU(pluSingle: number){
        if(pluSingle == 0){
          this.cargarDatos();
          let precios = new Array<Precio>(); 
          let precio: Precio;
          let precioKey: PrecioKey;
          let fecha = new Date().toUTCString();
          precioKey = new PrecioKey(fecha, 0, 0, null, this.sucursal);
          precio = new Precio(precioKey, null, this.moneda, 0, 0);
          precios.push(precio);
          this.plu = new PLU(0, '', '', '', '', '', '', false, 0, this.departamentoSeleccionado, null, this.tipoPluSeleccionado,
          null, null, null,
          this.etiquetaSeleccionda, this.unidadPeso, null, null, precios );
        } else{

          this.pluService.get(pluSingle).subscribe(
            (plu: PLU) => {
                    this.plu = plu;
                    this.cargarPrecios();
                    this.cargarDatos();
          });
        }
      }
 compararNombres( ciudad1: Departamento, ciudad2:Departamento) {
    if (ciudad1 == null || ciudad2 == null) {
      return false;
    }
    return ciudad1.nombre === ciudad2.nombre;
  }


     ///.......more methor
    }

Мой .html

Departamento

                    <select name="idDepartamento" [(ngModel)]="plu.idDepartamento" [compareWith]="compararNombres" >
                        <option *ngFor="let departamento of departamentos"   [ngValue] ="departamento"> {{ departamento.nombre }} </option>
                   </select></label>

Это работает правильно, когда plu.idDepartamento (edit) нетзначение NULL. Когда я хочу добавить новый PLU, мне нужно предварительно выбрать отдел, но это невозможно. Что я должен делать? Или что я делаю не так?

Любая помощь важна для меня,