时间戳

首页 > 解决方案 > 按键读取值的问题

angular - 按键读取值的问题

问题描述

错误类型错误：无法读取未定义的属性“IsOnline”

我想使用 Angular 6Http 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)
    }
}

获取.service.ts：

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

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

}

我的服务器的响应如下所示：

{'isOnline': True}

提前感谢您对问题的解释。

标签： angularangular6

解决方案

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

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

获取.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

或者，您可以使用 Angular 的async过滤器直接处理 observable：

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 支持直接处理 Promise 和 observables。在上面，async过滤器指示 angular 假定变量是可观察的（或承诺），因此它将在profile内部订阅和取消订阅可观察的。

祝你好运！

推荐阅读