Question

我很难在html合成中使用异步对象。

这是我的模特：

export class Version {

    isGood: boolean;

    constructor(isGood: boolean) {
        this.isGood= isGood;
    }
}

该模型由组件调用如下：

@Injectable()
export class MyComponent {

    public version: Version;

    constructor(private _myService: VersionService) {}

    getVersion(): void {
        // async service that gets the versions 
        this._myService.getVersion().subscribe(
            data => this.version= data,
            error=> console.log(error),
            () => console.log("getting all items complete")
        );
    }
}

我的模板引用版本变量如下：

<button (click)="getVersion()">Get Version</button>
<hr>
<p style="color:red">{{error}}</p>
<h1>Version</h1>

<p>{{version.isGood}}</p>

然而，我得到一个例外：

Cannot read property 'isGood' of undefined

从清理互联网，我发现我的问题是因为版本对象为空。如果我这样做：

<p>{{version | json}}</p>

我可以看到正确的版本

如果我做的话

<p>{{version.isGood | async}}</p>

我什么也看不见

如果我编辑MyComponent，并设置

public version: Version = new Version();

我可以执行.isGood属性获取，但它总是为空。

如果我以异步方式使用属性，是否应该以不同的方式加载属性？

Answer 1

使用?运算符或使用*ngIf。

<p>{{version?.isGood}}</p>

<p *ngIf="version">{{version.isGood}}</p>

Answer 2

试试这个：

<p>{{version?.isGood}}</p>

这告诉Angular防止版本.isGood未定义或为null，直到您通过服务点击并获取版本数据。

Answer 3

首先我纠正你。 @Injectable（）将普通的typescript类作为可注入服务，您可以在其中共享数据。

要制作组件，您需要使用@Component decoratore。

组件之间和应用程序内部的数据共享过程是创建服务并将其添加为模块中提供的服务。然后它的单身对象将永远存在。

//module
import {NgModule}      from '@angular/core';
import {YourService} from "./services/your-service";


@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    YouService
  ],
  bootstrap: [AppComponent]
})

export class AppModule {

}



//this is your component
import {Component} from '@angular/core';
import {YourService} from "../../services/your-service";


@Component({
  selector: 'component-app',
  templateUrl: '../../views/app.component.html',
})
export class HeaderComponent {

  constructor(public yourService: YourService) {
  }

}


//your service

import {Injectable} from "@angular/core";

@Injectable()
export class YourService {

  private _message: string = 'initial message';
  private _style: string = 'success';


  get message(): string {
    return this._message;
  }

  set message(value: string) {
    this._message += value;
  }

  get style(): string {
    return this._style;
  }

  set style(value: string) {
    this._style = value;
  }
}


//finally your view
<div class="row">
  <div [class]=""><h1>{{swapService.message}}</h1></div>
</div>

Answer 4

可观察的数据服务。

@Injectable()
export class MyComponent {

    public version = new ReplaySubject<Version>();

    constructor(private _myService: VersionService) {}

    init(): void {
        // async service that gets the versions 
        this._myService.getVersion().subscribe(
            data => this.version.next(data),
            error=> console.log(error),
            () => console.log("getting all items complete")
        );
    }

    getVersion(): void {
          this.version.asObservable();
    }
}

在模板中

<button (click)="init()">Get Version</button>
<hr>
<p style="color:red">{{error}}</p>
<h1>Version</h1>

<p>{{(version |async)?.isGood}}</p>

无法阅读财产＆＃39;版本＆＃39;未定义的角度2

4 个答案: