Question

我正在开发Angular 5应用程序，现在有一个名为解决方案的组件，该组件从另一个组件获取数据。

它工作正常，但是当我按下浏览器的重新加载按钮时会发生问题，所以没有数据发送到组件，所以我将如果要检查的语句是等于undefined的数据，则它将重定向到主页。

实际上它可以工作，并且可以重定向到主页，但是导航过程需要一段时间才能重定向，与此同时，Solution组件的其余部分继续加载并获取所有等于undefined的变量，以便任何count函数或toFixed（）函数HTML中的代码将在控制台中返回错误。

我通过一种解决方法解决了这一问题，将其余的ngInOnIt放在了我之前提到的if条件的else语句中，并将*ngIf的语句放在了{{1 }}来检查来自服务的数据。它虽然有效，但当然不是最佳方法。

HTML

以及HTML中的示例。

 export class SolutionComponent implements OnInit {
    res;
    solutionData = new SolutionData()
    constructor(private SolutionService: GetSolutionService,
        private http: Http,
        private router: Router) { }

    ngOnInit() {
        this.res = this.SolutionService.response;
        if (this.res === undefined) {    
                  this.router.navigate(['Home']); }
        else {
        this.solutionData.Temp = this.res.json()['Temp'];
        this.solutionData.Press = this.res.json()['Press'];
         }
    }

Answer 1

首先，它不是ngOninit的问题，您的ngIf条件本身是错误的，它应该只检查值是否存在，还应使用安全的导航运算符来检查变量是否具有值，

<div *ngIf="res">
       <div> Temp Equals {{res?.Temp?.toFixed(2)}} </div>
       <div> Press Equals {{res?.Press?.toFixed(2)}} </div>
</div>

Answer 2

您可以通过在解决方案组件上添加* ngIf条件来避免这种情况。仅当条件为true且不会发生其他错误时，这才加载组件。像这样：

  <solution-component *ngIf='data'
[inputData]= 'data'>
</solution-component>

导航到另一条路线后，ngOnInit（）会保持运行一段时间

2 个答案: