无法在 Input Typeahead 中显示简单的字符串

Question

我正在我的 Angular 应用程序上使用 ngbTypeahead，并且使用一组对象可以正常工作。 我的问题是当我尝试在输入 Typehead 上显示一个简单的字符串时它不起作用。

app.component.ts

import { Component, OnInit, ViewChild, AfterViewInit, ViewChildren, QueryList, ElementRef, Renderer2 } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Subject, Observable, merge } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, filter, switchMap } from 'rxjs/operators';
import { NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';

const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',
  'Connecticut', 'Delaware', 'District Of Columbia', 'Federated States Of Micronesia', 'Florida', 'Georgia'];

  const myArray: any = [
    {id: 1, Name: 'John'},
    {id: 2, Name: 'Paul'},
    {id: 3, Name: 'Mark'},
    {id: 4, Name: 'Turi '},
];


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {  
  selected: any;
  ngOnInit() {    
  }    

  @ViewChild('instance') instance;  
  focus$ = new Subject<string>();
  click$ = new Subject<string>();

  search = (text$: Observable<string>) => {
    const debouncedText$ = text$.pipe(
      debounceTime(200),
      distinctUntilChanged()
    );
    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
    const inputFocus$ = this.focus$;

    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
      map(term => (term === '' ? myArray : myArray.filter(v => v.Name.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    );    
  };
  formatter = (x: { Name: string }) => x.Name;

  onSubmit1() {    

    this.selected = 'TEST';  // <---- This not work  
  }

  onSubmit2() {
    this.selected = myArray[2];
  }
}

app.component.html

<div style="margin: 20px;">
  <div class="row">
      <div class="col-sm">
          <div class="form-group">      
              <ng-template #rt let-r="result" let-t="term">
                        {{ r.Name }}
              </ng-template>               
              <input                    
                id="typeahead-template"
                type="text"                                
                class="form-control"
                placeholder="Search..."
                [(ngModel)]="selected"
                [ngbTypeahead]="search"
                [resultTemplate]="rt"
                [inputFormatter]="formatter"
                (focus)="focus$.next($event.target.value)"
                (click)="click$.next($event.target.value)"
                #instance="ngbTypeahead"
              />                             
          </div>
      </div>                              
    </div>
    <button type="submit" (click)="onSubmit1()" class="btn btn-primary">String</button>
    <br>
    <br>
    <button type="submit" (click)="onSubmit2()" class="btn btn-primary">Record of Array</button>
</div>

我意识到了这个 stackblitz：https://stackblitz.com/edit/angular-r6spj3

你能帮帮我吗？

谢谢

Answer 1

Working stackblitz

这是因为您分配的是 string 而不是 myArray 元素对象。

修改onSubmit()函数如下：

 onSubmit1() {    
   this.selected = {Name:'TEST'};   
 }