Angular, как определить возвращаемое значение для отображения

Question

Я пытаюсь реализовать функцию автозаполнения / опережающего ввода. Но всегда отображается следующая ошибка: TypeError: Невозможно прочитать свойство 'title' из 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

В коде, который я выложил, много ошибок, в основном из-за несовместимости кодов переднего плана и внутреннего кода:

В файле HTML то, что следует после ngFor, должно быть массивом объектов, которые должны быть определены в файле TS. Но код, который я имел, просит, чтобы он ссылался на "результаты" ("результаты: наблюдаемые"), которые были определены как наблюдаемые, поэтому не могут отображаться должным образом; "items: Item[]" - это массив объектов, но его значение никогда не задавалось должным образом, и на него не ссылались в HTML

Решение: присвойте значения "items" в TS и позвольте HTML обратиться к "items" для отображения

Код FYI:

типа 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)

    })

    }
  }

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

Я думаю, что это должно быть movie.title

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