ngIf работает только при обновлении страницы

Question

Я использую Оксфордский API в своем угловом приложении. Я использую две разные конечные точки, первая - это записи, а другая - тезаурус. Я хочу представить данные, только если они существуют с использованием ngIf. Это работает с конечной точкой записей, но не с тезаурусом. Если слово не имеет синонимов и антонимов, эти два свойства не должны отображаться. Но в моем приложении оно не работает должным образом. Например, если я ищу «хорошо», его данные отображаются, включая синонимы и антонимы. И если затем искать слово, подобное «ханами», он получает сообщение об ошибке от конечной точки тезауруса, что не найдено. Но по-прежнему синонимы и антонимы отображаются изпредыдущий результат, который является словом «хорошо». Только после того, как я обновляю страницу, эти два удаляются.

Вот файл component.ts

constructor(public oxford: OxfordService, private route: ActivatedRoute, 
        private router: Router, private toastr: ToastrService, private spinner: NgxSpinnerService) { }

      ngOnInit() {

        this.route.paramMap.subscribe(

          params => {
            //console.log(params);
            this.spinner.show();


            this.wordId = params.get('word_id');

            this.oxford.getDefinition(this.wordId).subscribe(
              data => {
                console.log(data);
                this.o = data;
                this.title = this.o.word;
                this.definitions = this.getProperty(data, "definitions");
                this.examples = this.getProperty(data, "examples");
                this.lexicalCategories = this.getProperty(data, "lexicalCategory");

                this.pronunciations = this.getProperty(data, "pronunciations");
                this.origins = this.getProperty(data, "etymologies");


                this.lexicalCategories = this.removeDuplicateObjects(this.lexicalCategories);
                this.pronunciations = this.removeDuplicateObjects(this.pronunciations);
                this.origins = this.removeDuplicateObjects(this.origins);


                if (this.definitions.length > 0 || this.origins.length > 0 || this.examples.length > 0 || this.pronunciations.length > 0) {
                  this.displayInfo = true;
                }

                this.spinner.hide();

                console.log(this.lexicalCategories, this.pronunciations, this.origins);
              },
              error => {
                console.log(error);
                this.spinner.hide();
                //const message = error.error.error;
                this.toastr.error(`${error.status},${error.error.error}`);
              }

            );

            this.oxford.getSynAndAnt(this.wordId).subscribe(
              data => {
                // console.log(data);
                this.synonyms = this.getProperty(data, "synonyms");
                this.antonyms = this.getProperty(data, "antonyms");

                this.spinner.hide();
                console.log(this.synonyms, this.antonyms);
              },
              error => {
                console.log(error);
                this.spinner.hide();
                this.toastr.error(`${error.status},${error.error.error}`);
              }
            );

          }

        );

      }

Вот HTML-файл

 <div class="card" *ngIf="definitions && definitions?.length>0">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
          aria-expanded="false" aria-controls="collapseTwo">
          Definitions
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse thesaurus" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        <ul class="list-group">
          <li class="list-group-item" *ngFor="let def of definitions">
            {{def}}
          </li>

        </ul>
      </div>
    </div>
  </div>

  <div class="card" *ngIf="examples && examples?.length>0">
    <div class="card-header" id="headingEx">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseEx"
          aria-expanded="false" aria-controls="collapseEx">
          Examples
        </button>
      </h2>
    </div>
    <div id="collapseEx" class="collapse thesaurus" aria-labelledby="headingEx" data-parent="#accordionExample">
      <div class="card-body">
        <ul class="list-group">
          <li class="list-group-item" *ngFor="let ex of examples">
            {{ex.text}}
          </li>

        </ul>
      </div>
    </div>
  </div>

  <div class="card" *ngIf="synonyms && synonyms?.length>0">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree"
          aria-expanded="false" aria-controls="collapseThree">
          Synonyms
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse container thesaurus" aria-labelledby="headingThree"
      data-parent="#accordionExample">
      <div class="card-body row ">

        <p class="col-6 col-md-4 border border-dark text-center" *ngFor="let syn of synonyms">{{syn.text}}</p>
      </div>
    </div>
  </div>

  <div class="card" *ngIf="antonyms && antonyms?.length>0">
    <div class="card-header" id="headingFour">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour"
          aria-expanded="false" aria-controls="collapseFour">
          Antonyms
        </button>
      </h2>
    </div>
    <div id="collapseFour" class="collapse container thesaurus" aria-labelledby="headingFour"
      data-parent="#accordionExample">
      <div class="card-body row">

        <p class="col-6 col-md-4 border border-dark text-center" *ngFor="let ant of antonyms">{{ant.text}}</p>

      </div>
    </div>
  </div>

  <div class="card" *ngIf="pronunciations && pronunciations?.length>0">
    <div class="card-header" id="headingFive">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFive"
          aria-expanded="false" aria-controls="collapseFive">
          Pronunciations
        </button>
      </h2>
    </div>
    <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
      <div class="card-body">
        <ul class="list-group">
          <li class="list-group-item" *ngFor="let pron of pronunciations">
            {{pron.phoneticSpelling}}
            <span *ngIf="pron.audioFile">
              <audio #audio [src]="pron.audioFile"></audio>
              <a (click)=play(audio)>
                <i class="fa fa-volume-up" aria-hidden="true"></i>
              </a>
            </span>
          </li>

        </ul>
      </div>
    </div>
  </div>

Здесь скриншоты: с синонимами

ошибка из тезауруса

после обновления страницы или поиска до неевсе остальные слова

Answer 1

вы не используете ngOnInit так, как я бы его использовал. Входов нет, поэтому ловушка жизненного цикла на самом деле не нужна. Плюс вы делаете несколько подписок внутри другого. Я думаю, что ваша зависимость здесь - это параметр маршрутизатора, который запускает две другие подписки.

Мой совет - назначить this.route.paramMap как свойство (componentState $) в вашем TS и использовать асинхронный канал дляподпишитесь на него в вашем файле шаблона через

<ng-container *ngIf="componentState$ | async as state"></ng-container>

в вашей ts, в то время как просто укажите параметры

 componentState$ = this.route.paramMap.pipe(
      map(params => params.get('word_id')), 
      switchMap(wordId => combineLatest([
         this.oxford.getDefinition(wordId), 
         this.oxford.getSynAndAnt(wordId)
      ]).pipe(
            map(([def, synant]) => ({ def, synant }))
         )
      )
   );

ваш шаблон теперь будет иметь доступ ко всем вашим данным в точкенотации. Кроме того, это означает, что у вас есть только одна подписка, и вам не нужно отписываться, потому что ваш шаблонный асинхронный канал подойдет и вам. Нет необходимости назначать другие реквизиты в тс.