Question

我正在处理提交工作请求的Ionic应用程序。我目前正在使用输入的下拉菜单。当前代码的（我认为）相关部分如下：

pm-ion-autocomplete.html

<div clickOutside (clickOutside)="opened=false">
  <ion-list #autocompleteInput>
    <ion-item>
    ...
      <ion-input type="text" [formControl]="formCtrl" [(ngModel)]="inputModel" clearInput></ion-input>
    </ion-item>
  </ion-list>
  <ion-card #autocompleteCard class="autocomplete-list">
    <ion-list #autocompleteList>
    ...
      <ion-item *ngFor="let s of (filteredItems | async); let i = index;" [id]="generateId(i)" [attr.entryContent]="s.name" (click)="showCard(false); inputModel=s.name; forceClose=true">
        {{s.name}}
      </ion-item>
    </ion-list>
  </ion-card>
</div> 

pm-ion-autocomplete.ts

@Component({
  selector: 'pm-ion-autocomplete',
  templateUrl: 'pm-ion-autocomplete.html'
})
export class PmIonAutocomplete {
  ...
  @Input() suggestions:any[];
  @Input() name;

  ...
  inputModel = '';
  ...

  private filterItems(value: string): AutoCompleteItem[] {
    const filterValue = value.toString().toLowerCase();
    if(this.inputModel.length >= 2 && !this.forceClose){
      this.showCard(true); 
    } else { 
      this.showCard(false);
    }
    this.forceClose = false;
    this.deactivate(this.selectedIndex);
    this.resultsShown = this.suggestions.filter(item => item.name.toLowerCase().includes(filterValue)).slice(0, 5).length;
return this.suggestions.filter(item => item.name.toLowerCase().includes(filterValue));
  }

search.html

<pm-ion-autocomplete col-4 name="business-area" label="Requesting Business Area (State Search)" floating [suggestions]="countries"></pm-ion-autocomplete>

search.ts

export class SearchPage {
...
  countries = [
    {name :'Afghanistan'},
    {name :'Albania'},
    {name :'Algeria'},
    {name :'Andorra'},
    ....
    {name: 'Zimbabwe'}
  ]
}

如您所见，[ngModel] inputModel在pm-ion-autocomplete.html（PIA.html）中设置，而inputModel在pm-ion-autocomplete.ts（PIA.ts）中初始化。在PIA.html中，单击后，将inputModel的值分配给s.name，然后填充输入字段。

因此，代码现在的工作方式是，当您开始在输入字段中输入国家/地区名称时，会出现匹配条目的列表。然后，当您单击所需的国家时，该国家将显示在输入字段中。因此，如果您开始输入“ af”，则会出现名称中带有“ af”的国家/地区列表，然后单击“阿富汗”，则该字段将填充单词“阿富汗”。

我的任务是将[ngModel]移动到搜索页面（组件），并将其“冒泡”到PIA组件。

我首先将输入添加到PIA.ts中，如下所示：

@Input() suggestions:any[];
@Input() name;
*@Input() inputModel: string;*

然后我在search.ts中初始化了inputModel：

export class SearchPage {

  *inputModel = '';*
  ...
}

然后我将数据绑定添加到search.html：

<pm-ion-autocomplete col-4 name="business-area" label="Requesting Business Area (State Search)" floating [suggestions]="countries" *[inputModel]="inputModel*"></pm-ion-autocomplete>

然后我从PIA.html的离子输入中取出ngModel：

<ion-input type="text" [formControl]="formCtrl" clearInput></ion-input>

PIA.html的离子项目中仍然有（click）=“ ...; inputModel = s.name; ...”。

现在，当我开始在输入字段中键入内容时，该列表不会出现，因此无需单击任何内容。关于我在做什么错的任何想法吗？

角度/离子-另一个（子级）组件中ngModel的填充值

0 个答案: