Angular 组件属性在 subscribe() 中设置后莫名其妙地保持 "undefined"

Question

让我先说 是的，我正在使用箭头函数来保留 "this" 的范围（据我所知）。

我的组件有两个属性：

IsAdmin（布尔值）当前角色（字符串）

我调用 api 以通过 Angular 的 HttpClient 从我的后端获取用户角色，并且我有一个回调订阅方法，它使用结果更新上述属性。

但是，虽然我可以将角色值分配给 currentRole，但另一个属性 IsAdmin 即使在我分配它时仍未定义，并且我的 f12 调试器或 visual studio 代码中没有错误chrome 插件。

        import { Component, OnInit } from "@angular/core";
    import { AuthorizeService, IUser } from "../authorize.service";
    import { Observable } from "rxjs";
    import { map, tap } from "rxjs/operators";
    import { HttpClient } from "@angular/common/http";

    @Component({
      selector: "app-login-menu",
      templateUrl: "./login-menu.component.html",
      styleUrls: ["./login-menu.component.scss"]
    })
    export class LoginMenuComponent implements OnInit {
      isAuthenticated: Observable<boolean>;
      public userName: Observable<string>;

      IsAdmin : boolean;
      currentRole : string;

      constructor(private authorizeService: AuthorizeService, private http : HttpClient) {

      }

      ngOnInit() {
        this.isAuthenticated = this.authorizeService.isAuthenticated();
        this.userName = this.authorizeService.getUser().pipe(map(u => u && u.name));
        const endpoint = '.../api/User/User/GetRoles';

        this.authorizeService.getUser()
          .subscribe(data => {
             this.userNameSignedIn = data.name;
          });

        this.http.get<string[]>(endpoint).
          subscribe(result => {
            this.currentRole = result[0];
            console.log("this.currentRole ", this.currentRole); //prints "admin"
            this.IsAdmin == result.includes("admin");
            console.log("this.IsAdmin", this.IsAdmin); //prints "undefined"
          }, error => console.error(error));
      }
    }

控制台输出如下：

logon-menu.component.ts:37 this.currentRole  admin
logon-menu.component.ts:39 this.IsAdmin undefined

这到底是怎么回事？我究竟做错了什么？

Answer 1

您 subscribe 中的问题是您使用的是 ==（比较）而不是 =（赋值）

          subscribe(result => {
            this.currentRole = result[0];
            console.log("this.currentRole ", this.currentRole); //prints "admin"
            this.IsAdmin == result.includes("admin"); //<-- here is an error
            console.log("this.IsAdmin", this.IsAdmin); //prints "undefined"
          },

您的代码应该是：

          subscribe(result => {
            this.currentRole = result[0];
            this.IsAdmin = result.includes("admin");
          },

Angular 组件属性在 subscribe() 中设置后莫名其妙地保持 "undefined"

Angular component property inexplicably remains "undefined" after being set in subscribe()

javascript

typescript

angular-components

angular

angular-httpclient

Angular 组件 属性 在 subscribe() 中设置后莫名其妙地保持 "undefined"

Angular component property inexplicably remains "undefined" after being set in subscribe()

javascript

typescript

angular-components

angular

angular-httpclient

Angular 组件属性在 subscribe() 中设置后莫名其妙地保持 "undefined"