angular - 自动完成不能在 Angular 中同时处理两个值？

Question

试图带有两个值的自动完成文本框 - 即出版物和城市但自动完成仅适用于发布而不是城市。就像你在图像打击测试中看到的那样是出版，德里是城市，但如果我输入 ，它只能在出版前工作。出版和城市一起不工作
例如:如果我输入 test，它会显示 test，但是当我搜索 test -delhi 时，它不会显示自动更正的 test -delhi。

组件.html

<div class="form-field col-lg-12 ">
<label class="label" for="company">Publication</label>

<input [(ngModel)]="pubTitleKeyUp" (ngModelChange)="keyUpPublication(pubTitleKeyUp)" name="pub"
    class="input-text js-input" type="text" required autocomplete="off">

<div class="search-result" *ngIf="publications" style="max-height: 120px;">
<ul style="margin:0; padding:5px;">
<li *ngFor="let pub of publications">
<a (click)="onClickPublication(pub)"> {{ pub.Title }} -{{ pub.city }} </a>
                    </li>
                </ul>
            </div>

        </div> 

组件.ts

    keyUpPublication(e) {
    let k = e as string
    let kl = k.length

    this.publications = this.allPubs.filter(p => {
      let title = p.Title.toLowerCase()
      return title.substring(0, kl) == k.toLowerCase()
    })
  }

  onClickPublication(pub: IPub) {
    this.pubTitleKeyUp = pub.Title + '-' + pub.city;
    this.selectedPub = pub
    this.publications = []
  }
 

Answer 1

问题出在您的过滤器上。您仅在 title 上进行过滤而不是在城市。如果您正在搜索 li 的格式文本然后我建议遵循

 this.publications = this.allPubs.filter(p => {
  let title = p.Title + '-' + p.city;
  return title.toLowerCase().includes(k.toLowerCase());
})