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

【问题标题】：Can't set value to ngModel in p-autocomplete无法在 p-autocomplete 中为 ngModel 设置值
【发布时间】：2023-03-22 17:46:01
【问题描述】：

我有编辑组件，我使用 primeNG p-autocomplete

这是这个组件的html

<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>

这是这个组件的打字稿

@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 )
      }
    
    
        }

我的问题是未设置 p-autocomplete ngModel 并且“Birim”为空。但我使用组合框 ngModel 设置。我在 p-autocomplete 中写了 ngModel "selectedBirimAdvanced"。

这是浏览器截图。 screenshot

如何设置“Birim”字段。我该如何解决它。

【问题讨论】：

欢迎来到 Stack Overflow。您应该将代码本身作为文本分享。

标签： angular typescript autocomplete primeng

【解决方案1】：

我不确定这是否是问题所在，但也许它会有所帮助：尝试取出 onSelect 看看会发生什么。你的 ngModel 是 2 路绑定的，那么为什么要额外的 onSelect 呢？从理论上讲，您将模型设置两次

【讨论】：