角度 6：在选择“选择”的值后尝试循环抛出一个对象（通过 *ngFor）

Posted 2023-02-22

【中文标题】角度 6：在选择“选择”的值后尝试循环抛出一个对象（通过 *ngFor）

【英文标题】：angular 6: trying loop throw an object (via *ngFor) after choosing a value of a 'select'

【发布时间】：2018-12-26 14:36:38

【问题描述】：

我正在尝试构建一个用于订购电影的“快速订购”组件。

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

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

例如：

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

movieList 选择的呈现和检索日期对象的一切工作正常。但是当我添加第二个选择 (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>

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

【问题讨论】：

请勿张贴图片向我们展示文字。

【参考方案1】：

有几个问题。

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

组件

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>

我不想重构你的整个代码，但是如果你创建了一个绑定到 change 事件的 Observable，那么你可以使用 switchMap 来更新一个 movieShowSchedule 主题。

【讨论】：

是的。但我想获得“movieShowsSchedule”的钥匙。不是价值..

即使我将其更改为 of。并将 date 更改为像“asdasd”这样的随机文本，我仍然收到错误“ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'”

@codingnighter2000，这些更改有帮助吗？

谢谢。正在努力。我怎样才能“/* ...转换为数组*/”？我应该导入什么？你能提供那个“地图点击”的链接吗？

map 是 rxjs 的一部分，如果您使用 angular，您肯定已经在使用它。我会稍微简化一下答案。我不需要完全看中地图和水龙头。