Angular 如何定义要显示的 return 值

Question

我正在尝试实现自动完成/提前输入功能。但是下面的错误总是显示： TypeError: Cannot read 属性 'title' of undefined. 如何定义返回的结果以便 html 可以显示它？我对前端开发不太熟悉:(

谢谢

类型-ahead.component.html

<h1>Start Typing...</h1>

<input (keyup)="onkeyup($event)" placeholder="search movies...">

<ul *ngFor="let movie of results | async" class="card"> 
  <li>{{item.title}}</li>
</ul>

类型-ahead.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { switchMap, filter } from 'rxjs/operators';
import { Item } from '../../models/Item'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';



@Component({
  selector: 'app-type-ahead',
  templateUrl: './type-ahead.component.html',
  styleUrls: ['./type-ahead.component.css']
})

export class TypeAheadComponent implements OnInit {

  items: Item[];
  results: Observable<Item[]> ;// this will be an array of item documents
  offset : BehaviorSubject<string|null> = new BehaviorSubject("");
  //offset = new Subject <string>();// this will be the term the user search for

  constructor(private afs: AngularFirestore) { }

  //event handler, whenever the key is pressed we call the event, which is to check the next one
  onkeyup(e){
    console.log("e target value is like",e.target.value)
    this.offset.next(e.target.value.toLowerCase())
    console.log("let see if the offest is successfully captured",this.offset)
  }

  //Observe that offset value, filter out any null value, which will throw firestore error. 
  //Reactive search query
  search() {
    return this.offset.pipe(
      filter(val => !!val), // filter empty strings
      switchMap(offset => {
        return this.afs.collection('items', ref =>
          ref.orderBy(`searchableIndex.${offset}`).limit(5)
        )
        .valueChanges()
      })
    )
  }

  ngOnInit() {
    this.results = this.search();
    }
  }

Answer 1

我觉得应该是movie.title

<li>{{movie.title}}</li>

Answer 2

你的问题是你没有传递正确的变量。你有项目，而不是电影。

 <ul *ngFor="let movie of results | async" class="card"> 
      <li>{{movie.title}}</li>
  </ul>

或者您可以执行以下操作

<ul *ngFor="(let movie of results | async) as item" class="card"> 
  <li>{{item.title}}</li>
</ul>

Answer 3

我贴的代码有多个错误，主要是前后端代码不兼容：

在HTML文件中，ngFor之后的应该是对象数组，应该在ts文件中定义。但是我的代码要求它引用 "results" ( "results: Observable ") ，它被定义为 observable，因此无法正确显示； "items: Item[]" 是一个对象数组，但它的值从未被正确设置，并且在 HTML

中也没有被引用

解决方法：在TS中给"items"赋值，让HTML引用"items"显示

代码仅供参考：

类型-ahead.component.html

<h1>Start Typing...</h1>

<input (keyup)="onkeyup($event)" placeholder="search movies...">

<ul *ngFor="let item of items" class="card"> 
  <li>{{item.title}}</li>
</ul>

类型-ahead.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { switchMap, filter } from 'rxjs/operators';
import { Item } from '../../models/Item'
import {BehaviorSubject} from 'rxjs/BehaviorSubject';



@Component({
  selector: 'app-type-ahead',
  templateUrl: './type-ahead.component.html',
  styleUrls: ['./type-ahead.component.css']
})

export class TypeAheadComponent implements OnInit {

  items: Item[];
  results: Observable<Item[]> ;// this will be an array of item documents
  offset : BehaviorSubject<string|null> = new BehaviorSubject("");
  //offset = new Subject <string>();// this will be the term the user search for

  constructor(private afs: AngularFirestore) { }

  //event handler, whenever the key is pressed we call the even, which is to check the next one
  onkeyup(e){
    console.log("e target value is like",e.target.value)
    this.offset.next(e.target.value.toLowerCase())
    console.log("let see if the offest is successfully captured",this.offset)
  }

  //Observe that offset value, filter out any null value, which will throw firestore error. 
  //Reactive search query
  search() {
    return this.offset.pipe(
      filter(val => !!val), // filter empty strings
      switchMap(offset => {
        return this.afs.collection('items', ref =>
          ref.orderBy(`searchableIndex.${offset}`).limit(5)
        )
        .valueChanges()
      })
    )
  }

  ngOnInit() {
    this.results= this.search();
    this.results.subscribe(itemsFrmDB =>{ 
      this.items=itemsFrmDB;
      console.log("this.item: ",this.items)

    })

    }
  }

Angular 如何定义要显示的 return 值

Angular how to define return value for it to display

html

angular

autocomplete

google-cloud-firestore

angular2-observables