订阅角可观测返回空阵列角9

Question

如何将数组从可观察到的菜单编辑器组件中获取？

我花了好几个小时搜索这个。这在我的头脑中应该是小菜一碟，但我只是想了解这里的行为，以便我可以避免这个问题在未来。(为了简化事情，我已经尽可能多地删除了代码)

我有一个菜单编辑器组件(父组件)，它迭代我的菜单项列表，将菜单项作为menuItem注入菜单编辑器子组件。在子组件中，我将有一个表单，用户可以在其中编辑菜单项。在子表单中，我需要应用程序中的角色数组，这样我就可以创建一个复选框列表来从中挑选角色。

为了实现这一点，我创建了一个角色服务，我可以调用API等。这里的一切都在工作。

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

我希望将角色数组放入编辑器的component.ts中，以便开始构建反应性表单。但是，当我订阅角色服务中可观察到的内容时，它是空的。

当我在订阅方法中尝试console.log()时，它会在日志中做一些非常奇怪的事情。(照片附后)

有14个菜单编辑器项目(加上一个用于“添加新”)，但我得到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值，它就会用新值通知每个订阅者。但请记住，无论何时您订阅，您将得到最后的存储值。