下面是一个示例代码,展示了如何在Angular中使用*ngIf
和异步管道来基于结果模型的内部条件。
首先,我们有一个组件,它从后端获取一个用户对象,并将其存储在user
属性中。我们还有一个名为User
的模型类,它具有一个isActive
属性,用于存储用户的激活状态。
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { UserService } from './user.service';
import { User } from './user.model';
@Component({
selector: 'app-user',
template: `
{{ user.name }}
Status: {{ user.isActive ? 'Active' : 'Inactive' }}
`
})
export class UserComponent {
user$: Observable;
constructor(private userService: UserService) {
this.user$ = this.userService.getUser().pipe(
map(user => new User(user.isActive))
);
}
toggleActiveStatus() {
this.user$.subscribe(user => {
user.isActive = !user.isActive;
});
}
}
在上面的代码中,我们使用*ngIf
指令来检查user$
的值是否存在,如果存在,我们使用as
关键字将其存储在user
变量中。然后,我们可以在模板中使用user
变量来访问用户对象的属性。
在组件的构造函数中,我们使用UserService
来获取用户对象,并使用map
操作符将其转换为User
模型对象。User
模型类具有一个isActive
属性,它反映了用户的激活状态。
我们还提供了一个toggleActiveStatus()
方法,该方法通过订阅user$
来修改用户的激活状态。
请注意,UserService
是一个自定义的服务,用于从后端获取用户对象。你需要根据你的应用程序的需求进行相应的更改。
希望这个示例能帮助到你!