* ngIf не работает в моем Html, но ngIf показывает первое содержимое

#angular #angular-ng-if #angular10

Вопрос:

Я видел много вопросов, касающихся этой проблемы. но мне это не помогло.

Вот мой Html

  <div class="pl-lg-4">
          <div *ngIf="isStorySelected; else hi" class="row">
            <div class="col-lg-12">
              <div class="form-group">
                <label class="form-control-label" for="input-username">Story Name</label>
                amp;nbsp; amp;nbsp;<label class="form-control-label" for="input-username">Selected option</label>
              </div>
            </div>
          </div>
          <ng-template #hi>
            <div class="row">
              <div class="col-lg-12">
                <div class="form-group">
                  <label class="form-control-label">Select Story</label>
                  <select class="form-control form-control-alternative" value="">
                    <option>some option one</option>
                    <option>some option 2</option>
                  </select>
                </div>
              </div>
            </div>
          </ng-template>

если бы я использовал * ngIf подобным образом, он ничего не показывал. но использование like ngIf показывает первое содержимое.

Вот мой компонент.

 import { Component, OnInit } from '@angular/core';
import { Route } from '@angular/compiler/src/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-create-episodes',
  templateUrl: './create-episodes.component.html',
  styleUrls: ['./create-episodes.component.scss']
})
export class CreateEpisodesComponent implements OnInit {

  public activeRoutes: ActivatedRoute;
  public storyId: string;
  public isStorySelected = false;

  constructor(activeRoutes: ActivatedRoute) {
    this.activeRoutes = activeRoutes;

  }

  ngOnInit() {
    this.storyId = this.activeRoutes.snapshot.paramMap.get('id');
    if (this.storyId) {
      console.log('1');
      this.isStorySelected = true;
    } else {
      console.log('2');
      this.isStorySelected = false;
    }
  }
}

здесь я добавил URL-адрес stackblitz:https://stackblitz.com/edit/angular-lmxswk?file=src/app/app.component.ts

Я уже импортировал CommonModule в AppModule.

И я использую последнюю версию Angular. (10)

1. Вы вывели isStorySelected на экран, чтобы отобразить его текущее значение? Теперь вы используете его только для управления условием if. Вам нужно отобразить его значение после того, как вы будете уверены в своем коде.

2. можете ли вы создать демонстрацию stackblitz для этого

3. @PalakJadav уверен.

4. @LuDeveloper Я не понял, что ты имеешь в виду?

5. здесь stackblitz.com/edit/angular-lmxswk?file=src/app / …

Ответ №1:

Смотрю на интерфейс ActivatedRoute

paramMap возвращает Observable<ParamMap> , следовательно, вам нужно преобразовать его в observable

 name = 'Angular';
public storyId: Observable<boolean>;
public router: ActivatedRoute;

constructor(router: ActivatedRoute) {
  this.router = router;
}

ngOnInit(){
    this.storyId = this.router.paramMap.pipe(
      map((res) =>{
        const currentId = res.get('id');
        if(currentId){
          return  true;
        } else {
          return false;
        }
    }));
  }

Внутри шаблона

 <div *ngIf="storyId | async; else hi" class="row"></div>

Здесь работает stackblitz

Ответ №2:

Надеюсь, это решит вашу проблему. отсутствие then опции вызывает проблему.

 <div *ngIf="isStorySelected; then hello; else hi" class="row">
   <ng-template #hello>
      <h1>Hello</h1>
   </ng-template>
   <ng-template #hi>
      <h1>Hi</h1>
   </ng-template>
</div>