Question

我需要从服务中获取一些数据并将其显示为HTML。我已经将API调用置于服务中，并且在ts文件中获得了该数据（在控制台中检查了），但是当我尝试将相同的数据获取到html中时，它显示了空引用异常。无法弄清楚我错过了什么。

export class SsoComponent implements OnInit {  
  public samlResponseData: SamlResponse;  
  constructor(
    private ssoService: SsoService,   
    private store: Store<AppState>) { }

  ngOnInit() {   
    this.verifySessionExpiration();
   }

  public verifySessionExpiration() {    
    this.store.pipe(select(getAuthData))
      .subscribe(authData => {
        if (authData) {
          this.ssoService.fetchSamlResponse()
            .subscribe(samlResponse => {
              console.log(samlResponse);
              this.samlResponseData = samlResponse;
            });
        } else {
           this.ssoService.goLogin();
        }
       });
   }

我在控制台中看到正确的响应。这是我的HTML代码。

{{samlResponseData.ResponseData}}

我收到一个控制台错误，提示“无法设置未定义或空引用的属性'ResponseData'”

我有一个模型SamlResponse，它具有要在HTML中显示的字符串属性。

请帮助。

Answer 1

verifySessionExpiration()中具有异步逻辑。之所以会出现此错误，是因为您的模板试图在访问samlResponseData之前没有值。

一种解决方法是仅在您知道值不为null或未定义时才呈现数据。

<ng-container *ngIf="samlResponseData">
    {{samlResponseData.ResponseData}}
</ng-container>

另一种选择是将samlResponseData初始化为一些空对象：

samlResponseData = {};

无法从HTML文件中的ts文件访问公共属性

1 个答案: