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

我的模板中现在有类似的内容

选择

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

你可以

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

但我觉得这不是最好的主意。最好不要在此处使用

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();
    }

}

// ===
@组件（{…}）
公共YourComponent扩展组件实现OnDestroy{
公共状态对象：状态；
private destroy$=新主题（）；
构造函数（私有状态：StateService）{
状态
.takeUntil（此.destroy$）
.subscribe（state=>this.stateObject=state）；
}
公共Ngondestory（）：void{
this.destroy$.next（）；
此.destroy$.complete（）；
}
}

这还可以让您更好地控制当表单变脏时，

state

发出时该怎么办

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

你可以

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

但我觉得这不是最好的主意。最好不要在此处使用

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();
    }

}

// ===
@组件（{…}）
公共YourComponent扩展组件实现OnDestroy{
公共状态对象：状态；
private destroy$=新主题（）；
构造函数（私有状态：StateService）{
状态
.takeUntil（此.destroy$）
.subscribe（state=>this.stateObject=state）；
}
公共Ngondestory（）：void{
this.destroy$.next（）；
此.destroy$.complete（）；
}
}

---

这还可以让您更好地控制当窗体变脏时，

状态

发出时该怎么办。

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