Question

我当然是Angular的新手:) 我有一个列表，并且使用[（ngModel）]显示此列表的元素。然后，我想更新此选定的元素，并使用按钮保留更改。这是我的代码：

html组件

<div *ngIf="selectedAction">
  <label>Titre :
    <input [(ngModel)]="selectedAction.title" />
  </label><br />
  <label>Détails :
    <input [(ngModel)]="selectedAction.details" />
  </label><br />
  <label>Date limite :
      <input [ngModel]="selectedAction.date_limite | date:'dd/MM/yyyy'" (ngModelChange)="selectedAction.date_limite=$event" />
  </label><br />
  <button type="button" class="btn btn-primary"
    (click)="save();"
    style="float: none;">Modifier</button>
  <button type="button"class="btn btn-primary"
    (click)="clear()"
    style="float: none;">Cacher</button>
</div>
<!-- Affichage de la liste des actions -->
<h2>Ma liste d'action</h2>
  <ul class="list-group">
    <!-- Lors du click sur l'élément de la liste, la méthode onSelect() s'exécute -->
    <li *ngFor="let action of actions" (click)="onSelect(action)" class="list-group-item" style="padding: 0.25rem 1.25rem;">
      <span>{{ action.title | uppercase }}</span>
      <span>: {{ action.details }}</span>
        <button type="button" class="btn btn-primary" title="delete action"
          (click)="delete(action)">Archiver</button>
    </li>
  </ul>

ts组件，带有“修饰符”按钮的save（）操作

save(): void {
    this.actionService.updateAction(this.selectedAction);
  }

然后是服务组件

updateAction (action: Action): Observable<any> {
    return this.http.put(this.actionsUrl, action, httpOptions).pipe(
      catchError(this.handleError<any>('updateAction'))
    );
  }

实际上，当我单击按钮时，什么也没发生。

谢谢。

Answer 1

每当在Angular（基于RxJS Observable）中调用HTTP时，都应订阅。您忘记订阅了updateAction（）方法，该方法返回一个Observable。仅当您订阅到可观察时，HTTP调用才会发生。

save(): void {
    this.actionService.updateAction(this.selectedAction).subscribe();
 }

您需要在subscription方法中更新列表。作为回报，它将以html重新呈现以产生输出。

Angular HTTP调用不会触发吗？什么都没发生

1 个答案: