Javascript 角度6：选择a'的值后尝试循环抛出对象（通过*ngFor）；选择'；

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

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

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

e、 g:

通过渲染movieList select和检索dates对象，一切都很顺利。但是当我添加第二个select（id=selectDate）的html代码时，我得到了一个错误

这是我的密码： ts:

html:

电影：
{{movie.title}
日期：
{{date}}

有人知道问题出在哪里吗？那么如何才能让这段代码工作呢？

---

非常感谢

有几个问题

由于您使用的是

async

，因此应将

moveShowSchedule

设置为可观察的结果，而不是订阅，或者更简单的是，不要使用async

您可以使用

map

将movieShowSchedule转换为视图的可用模型

您应该将中的替换为*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>

{{x.date}

---

我不想重构您的整个代码，但是如果您创建了一个与更改事件绑定的可观察对象，那么您可以使用switchMap更新movieShowSchedule主题。

不要发布图像来显示文本。是的。但我想拿到“电影放映时间表”的钥匙。不是值..即使我将其更改为of。如果将{date}}更改为像'asdasd'这样的随机文本，对于管道'AsyncPipe'@codingnighter2000，我仍然会收到一个错误“error error:InvalidPipeArgument:'[object object]'”，这些更改有帮助吗？谢谢。正在努力。如何将“/*…转换为数组*/”？我应该进口什么？你能为“地图点击”提供一个链接吗？

map

是rxjs的一部分，如果你使用angular，你肯定已经在使用它了。我将把答案简化一点。我不需要对地图和水龙头那么着迷。

<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>

movieShowsSchedule = [];

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

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