订阅Angular Observable返回空数组Angular 9

Question

---

TL; DR;如何从Observable获取Role []数组到菜单编辑器组件中？

---

我花了数小时在此上进行搜索。这应该是小菜一碟，但我只想了解这里的行为，以便将来避免出现此问题。 （为了简化起见，我已经删除了尽可能多的代码）

我有一个菜单编辑器组件（父组件），它遍历我的菜单项列表，并将菜单项作为menuItem注入到菜单编辑器子组件中。在子组件中，我将具有一个表单，用户可以在其中使用菜单项进行编辑。在子窗体中，我需要在应用程序中包含一组角色，以便可以创建一个复选框列表以供选择。

为了实现这一点，我创建了一个角色服务，并且可以调用API等。这里的一切都正常。

然后将角色服务注入菜单项编辑器，然后我可以订阅并迭代角色服务的*ngFor Observable roles。很好。

我想将角色数组放入编辑器的component.ts中，以便可以开始构建反应式表单。但是，当我从角色服务订阅可观察对象时，它是空的。

[当我尝试在subscribe方法中使用console.log()时，它在日志中执行了非常严重的操作。 （附照片）。

[绘制了14个菜单编辑器项（“ add new”加1）但是我收到30条控制台日志消息，前15条为空，第二15条为值。

role.service.ts

@Injectable({
  providedIn: 'root'
})
export class RoleService {
  private roleSubject: BehaviorSubject<Role[]> = new BehaviorSubject([]);
  roles: Observable<Role[]> = this.roleSubject.asObservable();

  constructor(private http: HttpClient) {
    this.getAllRoles().subscribe();
   }

  getAllRoles() {
    return this.http.get<Role[]>(`${environment.privateApiUrl}/Role/Get`).pipe(
      map(data => {
        this.roleSubject.next(data)
      }),
      catchError(<T>(error: any, result?: T) => {
        console.log(error);
        return of(result as T);
      })
    )
  }

}

role.ts

export class Role {
  id: number;
  roleName: string;
}

menu-manager-item-edit.component.ts

export class MenuManagerItemEditComponent implements OnInit {

  public roles: Role[] = [];
  @Input() public menuItem: SideMenuItem;

  constructor(public roleService: RoleService) {

    this.roleService.roles.subscribe(response => {
      console.log(response)
      this.roles = response;
    })

  }
  ngOnInit(): void {}

}

Answer 1

[可能您已将订阅数乘以Observable 15倍，所以您获得了15倍console.log。为什么得到空数组，然后用Roles数组？简单。您正在使用BehaviorSubject来存储值，并且每次订阅该值时，它都会初始发送存储的值。因此，您需要设置初始值。传递next值后，它将用新值通知每个订户。但是请记住，每当您订阅时，您都会获得上一次存储的价值。