按键读取值的问题

Question

ERROR TypeError: Cannot read property 'IsOnline' of undefined

我想使用 angular 6 Http get() 请求从我的 django 服务器获取数据，但遇到此错误。我当前的代码如下：

app.component.ts

@Component({
    selector: 'app-root',
    template: ' <div>\n' +
    ' <button (click="loadUser()">Load profile</button>\n' +
    ' {{ getter | json }}\n' +
    ' </div>' +
    '',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    public dummy = this.getProfile();
    IsOnline: boolean;
    getter = {};

    constructor(private _http: GetService) { }

    getProfile() {
        this._http.getUser().subscribe(data => this.getter = data);
        const descData = this.dummy['IsOnline'];
        console.log(descData)
    }
}

get.service.ts:

@Injectable() 
    export class GetService { 
        constructor (private http: HttpClient) {} 
        private _url: string = "/test/"; 

        getUser() { 
            return this.http.get(this._url) 
        } 

}

我的服务器的响应如下：

{'isOnline': True}

在此先感谢您对问题的解释。

Answer 1

发生类型错误是因为当您尝试在 getProfile 方法中检索其 isOnline 属性时 this.dummy 未定义。此外，dummy 在访问它之前从未被赋值 isOnline 属性，getProfile 没有 return 值，并且没有办法 return 来自 getProfile 方法的配置文件，因为需要通过对 getUser.

的异步调用来检索配置文件

这可能与您要执行的操作一致：

get.service.ts

export interface IProfile {
    isOnline: boolean
}

@Injectable() 
export class GetService { 
    private _url: string = "/test/"; 

    constructor (private http: HttpClient) {} 

    getUser(): Observable<IProfile> { 
        return this.http.get(this._url) // returns an Observable
    }
}

app.component.ts

import { IProfile, GetService } from "../services/get.service.ts"

@Component({
    selector: 'app-root',
    template: `
    <div>
        <button (click="loadUser()">Load profile</button>
        <div *ngIf="profile">{{ profile | json }}</div>
        <div *ngIf="isOnlime">IsOnline: {{ isOnline }}</div>
    </div>
    `,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    public profile: IProfile;
    isOnline: boolean;

    constructor(private _http: GetService) {}

    loadUser(): void {
        this._http.getUser().subscribe(profile => {
            this.profile = profile
            this.isOnline = profile.isOnline
        })
    }
}

此处 loadUser 方法订阅 getUser，然后在 observable 发出值时设置成员变量，这是异步发生的。

或者，您可以使用 Angular 的 async 过滤器直接处理可观察对象：

import { IProfile, GetService } from "../services/get.service.ts"

@Component({
    selector: 'app-root',
    template: `
    <div>
        <button (click="loadUser()">Load profile</button>
        <div>{{ profile | async | json }}</div>
        <div>IsOnline: {{ (profile | async).isOnline }}</div>
    </div>
    `,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
    public profile: Observable<IProfile>;

    constructor(private _http: GetService) { }

    loadUser(): void {
        this.profile = this._http.getUser()
    }
}

这是可行的，因为 Angular 支持直接处理 promises 和 observables。在上面，async 过滤器指示 angular 假定变量是一个可观察的（或承诺），因此它将在内部订阅和取消订阅可观察的 profile。

祝你好运！

按键读取值的问题

Problems with reading value by key

angular

angular6