Жизненный цикл переменный Angular

Question

Есть код

export class ArticlesComponent {

  public forecasts: ArticlesSummaryModel;
  public art: string;
  public art1: string;
  public link: number=0;

  constructor(http: HttpClient, private route: ActivatedRoute) {
    this.art = 'https://localhost:44356/articlechoice/' + this.route.snapshot.params['article'];
    http.get<ArticlesSummaryModel>(this.art).subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  
 }
  ngOnInit() {
    this.art1 = "assets/articles/img/" + this.forecasts.imagesContextG[0].pathimage;
  }


  onCloseButton() {
    this.link++;
    if (this.link < this.forecasts.imagesContextG.length) {
    } else {
      this.link = 0;
    }
    this.art1 = "assets/articles/img/" + this.forecasts.imagesContextG[this.link].pathimage;
  }


}

interface ArticlesSummaryModel {
  articleContextG: ArticleContextG;
  imagesContextG: ImagesContextG[];
}

interface ArticleContextG {
  ids: number;
  name: string;
  content: string;
  title: string;
  description: string;
  data: string;
  head: string;
}
interface ImagesContextG {
  ids: number;
  name: string;
  pathimage: string;
}

Интересует переменная art1, когда я нажимаю на кнопку она нормально инициализируется(получает элемент из массива forecasts.imagesContextG[this.link].pathimage и все хорошо, но вот до нажатия кнопки что-то у меня не получается ее инициализировать. Я пробовал в конструкторе, после получения данных с сервера, а также в ngOnInit и тоже не получилось, хотя вроде как после конструктора срабатывает директива ngOnInit. И я не погу понять, в каком месте инициализировать переменную по умолчанию

Answer 1

Все таки помогите, я честно пытаюсь разрулить вопрос, но пока не осилил. Вы меня направили в правильную сторону, я заставил работать код, но ерунда какая-то выходит. Вот получается, что теперь каждый параметр надо инициировать в конструкторе, но это выглядит мягко говоря не очень. И далее, Вот например, если я присвоил переменной тест значение this.forecasts.articleContextG.content.

И когда пытаюсь вывести p>{{test}}

-Эта выполняется нормально p>{{forecasts.articleContextG.content}}

- а это выполняется, но в консоль выдает:

ArticlesComponent.html:10 ERROR TypeError: Cannot read property 'articleContextG' of undefined

Как сначала выполнить получение кода по запросу, а потом уже заниматься постройкой страницы?

  constructor(http: HttpClient, private route: ActivatedRoute) {
    this.art = 'https://localhost:44356/articlechoice/' + this.route.snapshot.params['article'];
    http.get<ArticlesSummaryModel>(this.art).subscribe(result => {
      this.forecasts = result;
      this.art1 = "assets/articles/img/" + this.forecasts.imagesContextG[0].pathimage;
      this.art2 = this.forecasts.imagesContextG;
      this.test = this.forecasts.articleContextG.content
    }, error => console.error(error));
    
 }

Answer 2

Если тебе нужно сделать запрос, для получения данных, чтобы потом их отобразить на странице используй Resolver
Чтобы не было ошибки, что обращаешься к undefined

{{forecasts.articleContextG.content}}

замени на

{{forecasts?.articleContextG?.content}}

БЛОГ НА HUSL

Жизненный цикл переменный Angular

Ответы (2 шт):