Angular - Почему моя переменная "undefined" после подписки на API? - PullRequest
Новая
       6

Angular - Почему моя переменная "undefined" после подписки на API?

0 голосов
/ 28 февраля 2020

После вызова службы API у меня в шаблоне есть неопределенная переменная, но я вижу ожидаемый результат в консоли.

Есть мой VideoComponent, который называется API 

export class VideoComponent implements OnInit {
  video: Video = new Video();

  constructor(private apiService: ApiService, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.apiService.getOneVideoByID(params['id']).subscribe((video: Video) => {
        this.video = video;
        console.log(this.video);
      });
    });
  }
}

Существует мой сервис API: 

export class ApiService {
  PHP_API_SERVER = 'http://127.0.0.1/TutoWorld/backend/api';
  private headers;

  constructor(private httpClient: HttpClient) {
    this.headers = new HttpHeaders().set('Content-Type', 'application/json')
  }


  getOneVideoByID(id: number): Observable<Video> {
    return this.httpClient.get<Video>(`${this.PHP_API_SERVER}/readOne?id=${id}`,{headers: this.headers});
  }
}

Мой шаблон: 

<div class="block5"></div>
<div id="videoContainer">
  <p>video title: {{video.titre}}  </p>
</div>

И моя модель видео: 

export class Video {
  id: number;
  url: string;
  titre: string;
  langue: string;
  description: string;
  date_creation: string;
  date_ajout: string;
  auteur_id: number;
  auteur_nom: string;
}

Если кто-то может помочь мне решить эту проблему вопрос, было бы здорово.
Спасибо

Ответы [ 3 ]

1 голос
/ 28 февраля 2020

Глядя на консоль, кажется, что это массив.

Я бы также избежал вложенных подписок, попробуйте это: 

  import { switchMap } from 'rxjs/operators'; // this import could be wrong, double check
.....
  ngOnInit() {
    this.route.params.pipe(
      switchMap(params => this.apiService.getOneVideoByID(params['id'])),
    ).subscribe((video: Video) => {
      this.video = video[0];
      console.log(this.video);
    });
  }
0 голосов
/ 29 февраля 2020

Чтобы ответить на начальный вопрос здесь, я должен сказать, что вы рассматриваете ответ от API, который представляет собой массив как отдельный экземпляр. Вот почему вы получаете это неопределенным:)

0 голосов
/ 28 февраля 2020

Спасибо, это работает, но у меня было в html, и теперь у меня есть другое сообщение об ошибке: https://zupimages.net/up/20/09/cik2.png

Есть мой код Iframe: 

<iframe width="1280" height="720"
          src="https://www.youtube.com/embed/{{getVideoID(video.url) | safe}}"
          frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
  </iframe>

и мой код GetVideoID: 

getVideoID(url: string) {
    return this.apiService.youtube_parser(url);
  }



  youtube_parser(url) {
    let regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    let match = url.match(regExp);
    return (match && match[7].length == 11) ? match[7] : false;
  }

Код трубы также: 

import {Pipe, PipeTransform, SecurityContext} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.sanitize(SecurityContext.URL, url)
  }
}
...