从对象自动填充 - Typescript/Angular 5

Question

我有一个名为 features 的对象。 对象示例：

   [{"_id":"5af03d95c4c18d16255b5ac7","name":"Feature 1","description":"<p>Description</p>\n","neworchange":"new","releaseId":"5aead2d6b28715733166e59a","productId":"5aead2acb28715733166e599","__v":0},{"_id":"5af03db1c4c18d16255b5ac8","name":"Feature 2","description":"<p>Description 2</p>\n","neworchange":"change","releaseId":"5aead2d6b28715733166e59a","productId":"5aead2acb28715733166e599","__v":0}]

我有一个自动填充此对象值的输入框。

   <input
        id="typeahead-focus"
        type="text"
        class="form-control"
        formControlName="relatedFeature"
        [ngbTypeahead]="search"
        (focus)="focus$.next($event.target.value)"
        (click)="click$.next($event.target.value)"
        #instance="ngbTypeahead"
        />

在自动填充框中，我需要显示功能的名称。但是当提交表单时，我需要传递 id。

我填写了我从这个例子中得到的自动填充代码：https://ng-bootstrap.github.io/#/components/typeahead/examples#focus

import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/merge';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
model:any;
angForm: FormGroup;
features:any;


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



constructor(//Code ommited) {
this.createForm();
}

search = (text$: Observable<string>) =>
text$
  .debounceTime(200).distinctUntilChanged()
  .merge(this.focus$)
  .merge(this.click$.filter(() => !this.instance.isPopupOpen()))
  .map(term => (term === '' ? this.features : this.features.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)));


  createForm() {
  this.angForm = this.fb.group({
  name: ['', Validators.required ],
  description: ['', Validators.required ],
  relatedFeature: ['']
  });
  }

  ngOnInit() {

  }
  getFeaturesByProduct() {
  this.route.params.subscribe(params => {
  this.featureservice.getFeaturesByProduct(params['productid']).subscribe(res => {
    this.features = res;
  });
});

}

目前自动填充框如下所示：

但是需要显示里面的对象的名字。

感谢您的帮助或其他方式，谢谢

Answer 1

我有一个相同的解决方案。

您也可以使用ng-template 自定义模板来显示结果，并使用对象作为模型。

我在stackblitz 上创建了一个演示。我希望这会对您/其他人有所帮助/指导。

HTML 代码

<ng-template #rt let-r="result" let-t="term">
  {{ r.name}}
</ng-template>

<input
  id="typeahead-focus"
  type="text"
  class="form-control"
  [(ngModel)]="model"
  [ngbTypeahead]="search"
  (focus)="focus$.next($event.target.value)"
  (click)="click$.next($event.target.value)"
  #instance="ngbTypeahead"
  [inputFormatter]="formatter"
  [resultTemplate]="rt"
/>
<pre>Selected : {{ model | json }}</pre>

ts 代码

search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      merge(this.focus$),
      merge(this.click$.pipe(filter(() => !this.instance.isPopupOpen()))),
      map(term => (term === '' ? this.features
        : this.features.filter(v => v.name.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    );

   formatter = (x: {name: string}) => x.name;