* ngIf не работает в моем Html, но ngIf показывает первый контент

Я видел много вопросов по этой проблеме. но они мне не помогли.

Вот мой 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>
                &nbsp; &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>

если я использовал * ng, если так, он ничего не показывает. но использование как 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)


angular angular10 angular-ng-if
person Namindu Sanchila    schedule 17.08.2020    source источник
comment
Вы поместили isStorySelected на экран, чтобы отобразить его текущее значение? Теперь вы используете его только для управления условием if. Вам нужно отобразить его значение после того, как вы убедитесь в своем коде.   -  person LuDeveloper    schedule 17.08.2020
comment
Вы можете создать демонстрацию stackblitz для этого   -  person Palak Jadav    schedule 17.08.2020
comment
@PalakJadav конечно.   -  person Namindu Sanchila    schedule 17.08.2020
comment
@LuDeveloper Я не понял, о чем вы?   -  person Namindu Sanchila    schedule 17.08.2020
comment
здесь stackblitz.com/edit/angular-lmxswk? file = src / app /   -  person Namindu Sanchila    schedule 17.08.2020

Ответы (2)


arrow_upward
3
arrow_downward

Глядя на интерфейс ActivatedRoute

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

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

person Varit J Patel    schedule 17.08.2020

arrow_upward
2
arrow_downward

Надеюсь, это решит вашу проблему. отсутствие опции 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>
person Aravinda Meewalaarachchi    schedule 17.08.2020
comment
Вы проверяли, является ли значение storyId после инициализации? Похоже, что проблема в роутере приложений .... - person Aravinda Meewalaarachchi; 17.08.2020