无法在 p-autocomplete 中为 ngModel 设置值

Question

I have edit component, where I use primeNG p-autocomplete

Here is html of this component

<div class="form-group row">
                <label class="col-lg-2 col-form-label" style="text-align:left;"><strong>Birim</strong></label>
                <div class="col-lg-5 ui-fluid">
                  <p-autoComplete [(ngModel)]="selectedBirimAdvanced" [suggestions]="filteredBirim" name="birim"
                                  (completeMethod)="search($event)"  [dropdown]="true" field="adi"
                                  (onSelect)="doOnSelect($event)"  >
                    <ng-template let-dto pTemplate="item">
                        <div>{{dto.adi}}</div>
                    </ng-template>
                  </p-autoComplete>
                  <span style="margin-left:50px">Birim: {{selectedBirimAdvanced||'none'}}</span>
                </div>
      
              </div>

Here is typescripts of this component

@Component({
      selector: 'kt-talep-giris-edit',
      templateUrl: './talep-giris-edit.component.html',
      styleUrls: ['./talep-giris-edit.component.css'],
      providers: [ConfirmationService]
    })
export class TalepGirisEditComponent implements OnInit {
        constructor(...) { }

    talep: PerBirimTalep = new PerBirimTalep();
    /*dropdown variables*/
       birim2: any[];
       filteredBirim: PerBirim[]; 
       selectedBirimAdvanced: string;
    
    ngOnInit() {
    
        this.sub = this.route.params.subscribe(params => {
          const id = params['id'];    
          if (!isNaN(id) && id != 'new') {
            this.findByTalep(id);
          }
          this.getCombo();
        });
      }
    
         findByTalep(id: number) {
            
            this.perBirimTalepService.getByTalep(id).subscribe(
              data => {
                this.talep = data;
           
        },
          error => {
            //this.showError('HATA', error);
                this.showMessage('error', 'Kayıt Bulunamadı.', 'Uyarı');
              }
            );
          }
    //Birim autocomplete
    
      getComboBirim2() {
        this.parameterService.getBirim().subscribe(data => {
          this.birim2 = data;
        });
      }
    
      search(event) {
        let filtered: PerBirim[] = [];
        let query = event.query;
        for (let i = 0; i < this.birim2.length; i++) {
          let birim1 = this.birim2[i];
          if (birim1.adi.toLocaleLowerCase('tr').indexOf(query.toLocaleLowerCase('tr')) == 0) {
            filtered.push(birim1);
          }
        }
        this.filteredBirim = filtered;
      }
    
      doOnSelect(event) {
    
        this.selectedBirimAdvanced = event.birimId;
        console.log('selectedBirimAdvanced  '+ event.birimId )
      }
    
    
        }

My problem is p-autocomplete ngModel is not setted and "Birim" is null. But I used combo-box ngModel is setted. I wrote ngModel "selectedBirimAdvanced" in p-autocomplete.

Here is browser screenshot. screenshot

How can I set "Birim" field. How can I fix it.

Answer 1

I'm not sure if this is the problem, but maybe it helps: Try taking out the onSelect and see what happens. Your ngModel is 2 way bound, so why do the extra onSelect? Theoretically you are setting your model twice