如何在页面加载时自动运行一个函数？

Question

我有一个名为 "getData" 的函数，需要执行它才能显示某些信息。我希望它自动运行但目前它只在单击激活该功能的按钮后显示数据 - 请参阅 (component.html):

<button (click)="getData()">Fetch Data</button>

我已经尝试在 component.ts- 文件中的 ngOnInit() 中插入函数：

ngOnInit(){
    this.getData()
  }

并尝试在 component.html 文件中加载：

<p onload="getData();">component works!</p>

...两者都没有导致所需的结果

这就是代码的样子（我基本上是从 API 调用和 select 具有特定 id 的项目中获取数据） component.ts

/*some code*/
export class DetailComponent implements OnInit {
  public data: any = []
  public selected: any = []
  constructor(
    public http: HttpClient, 
    public route: ActivatedRoute) { }

  getData(){
    const person_id = this.route.snapshot.paramMap.get('person_id');
    const url ='http://localhost:4000/api/allpeople';
    this.http.get(url).subscribe(data => this.data = data);
    this.selected=this.data.find(item=>
      {
        if(item['person_id']===person_id)
          {
            return true;
          }
        return false;
      });
    console.log(person_id, this.selected);
    return this.selected;
  }

  ngOnInit(){
    this.getData()
  }

component.html

<h1>{{selected.title}}</h1>
{{selected.person_id}}

加载页面时，控制台记录以下错误 "Cannot read property 'title' of undefined" 并且错误消息指的是这一行：<h1>{{selected.title}}</h1>

但是当我点击按钮时，它会按预期记录数据。

我怎样才能让它自动发生？

Answer 1

Error "Cannot read property 'title' of undefined"

这是因为模板中表达式为运行时，此时数据还未加载，未定义

将调用放回 ngOnInit() 并将表达式包装在 ngIf 语句中。

<ng-container *ngIf="selected">
  <h1>{{selected.title}}</h1>
  {{selected.person_id}}
</ng-container>

Answer 2

使用$scope并在你的控制器的开头调用一个函数，像这样

$scope.init = function () {
   $scope.title = "title";
   $scope.person_id = 2;
};

$scope.init();

controller是自动加载页面的，本例中的$scope可以做你想要的（$scope.init()，如果你不在其他函数中包裹，会自动调用）

Answer 3

ngOnInit() 是正确的地方，当你想调用 onload 方法时。如果数据是异步的，'selected' 仍然可以在呈现模板时未定义。为避免错误，您可以使用@Flignats 那样的条件包装块，或者简单地添加一个 ? like

  <h1>{{selected?.title}}</h1>
  {{selected?.person_id}}

当 selected 为 null 或 undefined 时，?. 停止计算。

您正在订阅之外分配数据。应该是这样的：

getData(){
...
this.http.get(url).subscribe(data => {
  this.data = data;
  this.selected=this.data.find(item=>
    {
      if(item['person_id']===person_id)
        {
          return true;
        }
      return false;
    });
    console.log(person_id, this.selected);
  });
}

如何在页面加载时自动运行一个函数？

How do I automatically run a function when the page is loaded?

html

javascript

function

onload

angular

如何在页面加载时自动 运行 一个函数？

How do I automatically run a function when the page is loaded?

html

javascript

function

onload

angular

如何在页面加载时自动运行一个函数？