Angular Rxjs主体未立即发送数据
我有一个带有RXJS主题的服务,我正在构造函数中为主题分配数据,并执行api调用。我在组件模板中订阅的主题。虽然数据是提供给受试者的,但它不是第一次立即发出Angular Rxjs主体未立即发送数据,angular,rxjs,rxjs6,rxjs-observables,Angular,Rxjs,Rxjs6,Rxjs Observables,我有一个带有RXJS主题的服务,我正在构造函数中为主题分配数据,并执行api调用。我在组件模板中订阅的主题。虽然数据是提供给受试者的,但它不是第一次立即发出 interface Employee { employee_age: number; employee_name: string; employee_salary: number; id: string; profile_image: string; } @Injectable({ providedIn: "root&quo
interface Employee {
employee_age: number;
employee_name: string;
employee_salary: number;
id: string;
profile_image: string;
}
@Injectable({
providedIn: "root",
})
export class EmployeeService {
employeesSub = new Subject<Employee[]>();
employees: Employee[];
constructor(private http: HttpClient) {
this.api().subscribe((res) => {
this.employees = res.data;
this.employeesSub.next(this.employees);
});
}
getEmployees(){
this.employeesSub.next(this.employees);
}
addEmployee(name,age,salary) {
this.employees.unshift({id:(this.employees.length +
1).toString(),employee_age:age,employee_name:name,employee_salary:salary,profile_image:""});
this.employeesSub.next(this.employees);
}
api() {
return this.http
.get<any>(environment.employeeUrl)
.pipe(map((data) => data.items));
}
}
Code in template
<h2>List</h2>
<div style="display: flex;"></div>
<table>
<tr *ngFor="let item of employeeService.employeesSub|async">
<td> {{ item.employee_name}} </td>
<td> {{ item.employee_age}} </td>
<td> {{ item.employee_salary}} </td>
</tr>
</table>
我在200毫秒后通过调用getEmployees函数重新分配数据,它正在工作。知道为什么会发生这种情况吗。您需要切换到一个
服务在组件之前初始化,因此它在组件订阅之前发出值。因为主体没有值,所以组件不会得到任何东西。通过切换到行为主题,您可以订阅它并立即获得最新的值
这里接受的答案很好
你需要切换到一个新的模式
服务在组件之前初始化,因此它在组件订阅之前发出值。因为主体没有值,所以组件不会得到任何东西。通过切换到行为主题,您可以订阅它并立即获得最新的值
这里接受的答案很好
刚发现在组件模板中使用async订阅时,使用observable代替subject并向其分配数据是有效的。刚发现在组件模板中使用async订阅时,使用observable代替subject并向其分配数据是有效的。
// Init the subject with a starting value, to be updated in the constructor later
employeesSub = new BehaviorSubject<Employee[]>([]);
constructor(private http: HttpClient) {
this.api().subscribe((res) => {
this.employees = res.data;
this.employeesSub.next(this.employees);
});
}