angular 6：在选择 'select' 的值后尝试循环抛出一个对象（通过 *ngFor）

Question

我正在尝试构建一个 "quick order" 组件来订购电影。

第一个元素是 'select'。我通过 http 请求获取结果，然后呈现选项。

当用户选择电影选项时，我需要向他显示另一个显示可用日期的 select。我需要根据一个以字符串日期作为键的对象来呈现 select。

例如：

{
    "2018-07-19": {
        "00:10": "5b4f445da2c93e36c4f1a1ca",
        "01:00": "5b4f355ab6334b27fc031adb",
        "13:44": "5b4f43fda2c93e36c4f1a1c9"
    },
    "2018-07-25": {
        "23:00": "5b4f357db6334b27fc031adc"
    }
}

渲染电影列表select和检索日期对象一切正常。但是当我添加第二个 select (id=selectDate) 的 html 代码时，我得到一个错误。

这是我的代码： ts:

import { Component, OnInit } from '@angular/core';
import { MoviesService } from '../services/movies.service';
import { ShowService } from '../services/show.service';
import { Observable } from 'rxjs';
import * as moment from 'moment';

@Component({
  selector: 'app-quick-order',
  templateUrl: './quick-order.component.html',
  styleUrls: ['./quick-order.component.css']
})
export class QuickOrderComponent implements OnInit {

  movieList: any;
  movieShowsSchedule: any;
  selectedMovie: any;
  selectedDate: any;


  constructor(private moviesService: MoviesService, private showService: ShowService) { }

  ngOnInit() {
    this.movieList = this.moviesService.getMovies();
  }

  onChangeSelectMovie() {
    this.movieShowsSchedule = this.showService.getMovieSchedule(this.selectedMovie).subscribe(res => {
      alert("we got movie successfully");
      console.log(res);
    }, err => {
      alert("we did not get movie");
    });
  }

  onChangeSelectDate() {

  }

}

html:

<div class="form-group">
    <label for="selectMovie">Movie:</label>
    <select id="selectMovie" [(ngModel)]="selectedMovie" (change)="onChangeSelectMovie()">
      <option *ngFor="let movie of movieList | async" value="{{movie._id}}" >{{movie.title}} </option>
    </select>
    <label for="selectDate">Date:</label>
    <select id="selectDate" [(ngModel)]="selectedDate" (change)="onChangeSelectDate()">
      <option *ngFor="let date in movieShowsSchedule | async" value="{{date}}" >{{date}}</option>
    </select>
  </div>

有人知道问题出在哪里吗？以及如何使这段代码起作用？非常感谢！

Answer 1

有几个问题。

由于您正在使用 async，因此您应该将 moveShowSchedule 设置为 Observable 的结果而不是订阅，或者更简单的是，不要使用异步。
您可以使用 map 将 movieShowSchedule 转换为可用的视图模型。
您应该将 in 替换为 of in the *ngFor.

组件

movieShowsSchedule = [];

onChangeSelectMovie() {
  this.showService.getMovieSchedule(this.selectedMovie).subscribe(x => {
    this.moveShowSchedule = [];
    for (let key in x) {
      this.moveShowSchedule.push({ key, date: x[key].date });
    }
  });
}

HTML

<option *ngFor="let x of movieShowsSchedule" [ngValue]="x.date">
    {{x.date}}
</option>

我不想重构你的整个代码，但如果你创建了一个绑定到更改事件的 Observable，你就可以使用 switchMap 来更新 movieShowSchedule Subject。

angular 6：在选择 'select' 的值后尝试循环抛出一个对象（通过 *ngFor）

angular 6: trying loop throw an object (via *ngFor) after choosing a value of a 'select'

javascript

angular-directive

angular

angular6