如何以角度隐藏数据列表中的[值]？

问题描述

我尝试使用带有搜索结果的下拉数据列表为电影数据库创建搜索表单，并且当单击选项时，我想移至电影页面。但是我不知道如何在

    <form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2"
         required
         list="foundMovies"
         [(ngModel)]="searchString"
         [ngModelOptions]="{standalone: true}"
         (ngModelChange)="startSearch($event)"
         type="search" placeholder="Search" aria-label="Search">

  <datalist id="foundMovies">
    <option *ngFor="let movie of foundMovies"
            [value]="movie.id"
    > {{movie.title}} </option>
  </datalist>
  <button
    (click)="submitForm()"
    class="btn btn-outline-success my-2 my-sm-0" >Найти</button>
</form>

这是ts文件：

import { Component,OnInit } from '@angular/core';
import {MovieService} from '../../../model/movie.service';
import {Movie} from '../../../model/movie';

@Component({
  selector: 'app-movie-search-form',templateUrl: './movie-search-form.component.html',styleUrls: ['./movie-search-form.component.css']
})
export class MovieSearchFormComponent implements OnInit {
  searchString: Movie;
  foundMovies: Movie[];

  constructor(private movieService: MovieService) { }

  ngOnInit(): void {
  }

  submitForm(): void{
    console.log(this.searchString);
  }

  startSearch(search): void {
    console.log(search);

    if (search.length >= 3) {
      this.movieService.searchForMovies(search)
        .subscribe(result => {
          if (result.length){
            this.foundMovies = result;
          }
        });
    }
  }
}

主要问题是，当我将[ngValue]与选项一起使用时，无法在startSearch（search）中获得movie.id：void { console.log（搜索）;字符串，我始终会获得电影的名称，如果我使用[value]代替，则在选择选项时会得到movie.id，但我无法在选项的下拉列表中隐藏movie.id。因此，问题是当我使用带有选项的[value]时如何隐藏movie.id，或者当我选择某些选项时如何使用[ngValue]来获取movie.id。使用[ngValue]

使用[值]

解决方法

根据您的代码（我建议始终指定您正在运行的angular的版本）

我在新行中加上了一行，现在您已经拥有了电影的ID。

directory = './mydirec'
files = glob('{0:s}/*.gather.txt'.format(directory))

经过一个小时的查询，我发现使用dataList并不是一个很好的解决方案。因此，我在这里找到了问题的答案：enter link description here

这是我的输入内容：

    <form class="form-inline my-2 my-lg-0">

  <input id="typeahead-prevent-manual-entry"  type="text" class="form-control"
         [(ngModel)]="movie"
         [ngModelOptions]="{standalone: true}"
         (ngModelChange)="jumpToMovie($event)"
         [ngbTypeahead]="movieSearch"
         [inputFormatter]="formatter"
         [resultFormatter]="formatter"
         [editable]='false' />
  <hr>
  <pre>Model: {{ movie | json }}</pre>
  <button
    (click)="submitForm()"
    class="btn btn-outline-success my-2 my-sm-0" >Search</button>
</form>

我还必须添加库“ @ ng-bootstrap / ng-bootstrap”：“ 7.0.0”， ts中的白色movieSearch和formatter方法：

import { Component,OnInit } from '@angular/core';
import {MovieService} from '../../../model/movie.service';
import {Movie} from '../../../model/movie';
import {Observable,of} from 'rxjs';
import {switchMap,catchError,map} from 'rxjs/operators';
import {debounceTime,distinctUntilChanged} from 'rxjs/operators';

@Component({
  selector: 'app-movie-search-form',templateUrl: './movie-search-form.component.html',styleUrls: ['./movie-search-form.component.css']
})
export class MovieSearchFormComponent implements OnInit {
  movie: Movie;
  searchString: string;
  foundMovies: Movie[];

  constructor(private movieService: MovieService) { }

  ngOnInit(): void {
  }

  submitForm(): void{
    console.log(this.searchString);
  }

  formatter = (movie: Movie) => movie.title;

  movieSearch = (text$: Observable<string>) => {

    return text$.pipe(
      debounceTime(200),distinctUntilChanged(),// switchMap allows returning an observable rather than maps array
      switchMap( (searchText) =>  {
        this.searchString = searchText;
        return this.movieService.searchForMovies(searchText).pipe(
            // Reduce size of result array
            map( data => data.slice(0,7 )
          ));
      }),catchError(err => '')
    );
  }

  jumpToMovie(event): void{
    console.log(event);
  }

}

现在，当我单击建议的链接时，此电影成为对象，并且可以移至所需的电影页面。

angular option select select