Question

我有一个对象列表，我正在将信息传递给bootstrap模式。 Modal看起来像这样：

  <button
class="btn btn-primary btn-xs"
data-toggle="modal"
data-target="#matchModal"
(click)="matchSearch()">
Select</button>

<div class="modal fade" id="matchModal" tabindex="-1" role="dialog" aria-
 labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-
  label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Card Matches</h4>
  </div>
  <div class="modal-body" *ngFor="let matchBrandCard of matchBrandCards">
    <div>
      <input type="checkbox">
        <li>{{matchBrandCard.title}}</li>
        <li>{{matchBrandCard.uuid}}</li>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-info">Create</button>
    <button type="button" class="btn btn-success">Merge</button>
    <button type="button" class="btn btn-default" data-
 dismiss="modal">Close</button>
  </div>
</div>

更新在我的组件中：

matchBrandCards: Card[] = [];

matchSearch() {
this.clientCardsService.fetchBrandCards(this.clientCards.title).subscribe(
  clientCards => {
    this.matchBrandCards = clientCards;
  }
);

}

clientCards是为我的http请求提供必要参数然后创建matchBrandCards的列表。

我的问题是信息第一次正确传递给模态，但是当我从列表中选择其他项目时，模态不会使用新选择的信息进行更新。一切都在处理更新我迭代的matchBrandCards以在模态中创建列表但显示的值保持不变。寻找实现我所需功能的方法。

建议||提示将不胜感激。

Answer 1

将matchBrandCards更改为主题并使用async：

  <div class="modal-body" *ngFor="let matchBrandCard of matchBrandCards$ | async">

在包含组件中：

public matchBrandCards$ = new Subject();

然后当你有更新时：

updateHandler(values) {
  this.matchBrandCards$.next(values);
}

将动态数据传递给Bootstrap模态角4

1 个答案: