在模板中使用带有异步管道的 ngModel答案

【问题标题】：Using ngModel with async pipe in template在模板中使用带有异步管道的 ngModel
【发布时间】：2018-05-30 17:38:17
【问题描述】：

我的模板中现在有类似的东西

<ng-container *ngIf="state | async as stateObject">
  <select [(ngModel)]="stateObject.name">
    <option>Select</option>
  </select>
<ng-container>

我的问题是如何在我的组件中获取 stateObject.name 的值，因为我的组件中没有任何订阅。

【问题讨论】：

标签： rxjs angular2-template

【解决方案1】：

我的问题是如何在我的组件中获取 stateObject.name 的值，因为我的组件中没有任何订阅。

你可以的

<select [(ngModel)]="stateObject.name" (ngModelChange)="doSomething($event)">
    <!-- … -->
</select>

然后在你的组件中

doSomething (model: State): void {
    console.log(model); // or whatever
}

但这并不是最好的主意。最好不要在此处使用 async 管道，而是在组件中显式管理订阅：

<ng-container *ngIf="stateObject">
    <select [(ngModel)]="stateObject">
        <!-- … -->
    </select>
</ng-container>

// ===

@Component({ … })
public YourComponent extends Component implements OnDestroy {

    public stateObject: State;
    private destroy$ = new Subject();

    constructor(private state: StateService) {
        state
            .takeUntil(this.destroy$)
            .subscribe(state => this.stateObject = state);
    }

    public ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }

}

这也可以让您更好地控制在例如，state 在您的表单脏时发出。

【讨论】：

第一种方法我不想尝试，第二种看起来更好会尝试