как правильно использовать ngifelse в angular9?

Question

У меня есть список сообщений, которые я получаю с помощью служб и заполняю в интерфейсе пользователя. Существует поле поиска, определенное на основе идентификатора. Мое требование заключается в том, что когда я предоставляю идентификатор, и он там, он должен быть отображается в карточке. Это работает нормально. Но проблема в том, что когда я предоставляю идентификатор, которого там нет, он должен дать сообщение, что пользователь не найден. Я пытаюсь использовать синтаксис ngifelse для этого.

моя html страница:

<div class="input-group">
            <input type="text" placeholder="ID" (keyup.enter)="onSearch($event)" class="form-control" id="txtSearchText" name="SearchText" [(ngModel)]="searchText">
            <div class="card text-white bg-success mb-3" *ngIf="showcard; else elseblock">

                <div>{{searchPost.userId}}</div>
                <div>{{searchPost.id }}<div>
                <div>{{searchPost.title}}</div>
                <div>{{searchPost.body}}</div>
            </div>

            <ng-template  #elseBlock>User is not found try again</ng-template>                                  


        </div>

также файл ts:

onSearch(event:any){
    this.searchText=event.target.value;

    this.projectService.searchUsers()
    .subscribe((response:Posts[])=>{   
      if(response[this.searchText-1]) {    
        var p: Posts = new Posts();
        this.searchPost.userId=response[this.searchText-1].userId;
        this.searchPost.id=response[this.searchText-1].id;
        this.searchPost.title=response[this.searchText-1].title;
        this.searchPost.body=response[this.searchText-1].body;
        this.showcard=true;
      }
      else
      { //this.showcard=false;
        console.log("user id not found")
        console.log(this.showcard)
      }   
      }
    )

  }

У меня есть определили свойства как показано ниже в файле ts.

showcard:boolean=false;

elseblock:TemplateRef<any>

проблема в том, что когда его нет, он печатает правильно на консоли, но почему-то ngifelse не работает. Любые предложения.

Answer 1

Вы можете реализовать if-else в angular следующим образом:

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  checkValidity : boolean = false;
}

app.component . html

<p *ngIf = "checkValidity; then ifBlock; else elseBlock"></p>


<ng-template #ifBlock>
  <p> If Block is rendered </p>
</ng-template>

<ng-template #elseBlock>
  <p> Else Block is rendered </p>
</ng-template>

Надеюсь, это решит ваш запрос:)