Как автоматически запустить функцию при загрузке страницы? - PullRequest
Новая
       10

Как автоматически запустить функцию при загрузке страницы?

1 голос
/ 28 октября 2019

У меня есть функция с именем "getData", которая должна быть выполнена для отображения определенной информации. Я хочу, чтобы он запускался автоматически, но в данный момент он отображает данные только после нажатия кнопки, которая активирует функцию - см. (Component.html): 

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

Я уже пытался вставить функцию в ngOnInit () в файле component.ts: 

ngOnInit(){
    this.getData()
  }

и попытка загрузки в файле component.html: 

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

... оба не привели к необходимому результату

Так выглядит код (в основном я получаю данные из вызова API и выбираю элемент с определенным идентификатором) 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}}

При загрузке страницы консоль регистрирует следующую ошибку «Не удается прочитать свойство 'title' of undefined", и сообщение об ошибке ссылается на эту строку: <h1>{{selected.title}}</h1>

Но когда я нажимаю кнопку, она регистрируетсяданные, как это должно быть.

Как я могу позволить этому произойти автоматически?

Ответы [ 3 ]

4 голосов
/ 28 октября 2019

Ошибка "Не удается прочитать свойство 'title' of undefined"

Это происходит потому, что когда выражение запускается в шаблоне, в это время данные не загружаются и они не определены.

Поместите вызов обратно в ngOnInit() и оберните выражение в оператор ngIf. 

<ng-container *ngIf="selected">
  <h1>{{selected.title}}</h1>
  {{selected.person_id}}
</ng-container>
1 голос
/ 28 октября 2019

ngOnInit() - правильное место, когда вы хотите вызвать метод onload. Если данные асинхронны, «выбранные» могут все еще быть неопределенными при визуализации шаблона. Чтобы избежать ошибки, вы можете обернуть блок условием, подобным @Flignats, или просто добавить ? подобно 

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

. ?. прекращает оценку, когда selected равно null или * 1009. *.

Вы назначаете данные вне подписки. Должно быть так: 

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);
  });
}
0 голосов
/ 28 октября 2019

Используйте $scope и вызовите функцию в начале вашего контроллера, например: 

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

$scope.init();

Контроллер автоматически загружается вместе со страницей, и в этом случае $ scope может сделать то, что вы хотите($ scope.init () вызывается автоматически, если вы не заключаете его в другие функции)

...