НГ-класс проблема с условием в угловых?

Question

У меня есть две ссылки, которые отображают два разных изображения при нажатии соответствующей ссылки. Первое поведение в порядке, но когда я снова нажимаю на выбранную ссылку, изображение отображается правильно, но при наведении на другую ссылку.Я имею в виду отображение второй ссылки, как выбрано.вот что я делал до сих пор.

Может ли кто-нибудь помочь с тем, что я делаю неправильно?

this.toogleClick - это true

loadingImg(folder) {
    this.toggleClick = !this.toggleClick;
    this.meta
      .getToken(
        "images",
        this.imgName.ReportJobId,
        (folder == "input" ?
          this.imgName.UniquePhotoName :
          this.imgName.UniquePhotoName
            .replace(".JPG", ".png")
            .replace(".jpg", ".png")),
        folder
      )
      .subscribe(data => {
        this.imgSrc = this.someurl(data);
      }, () => {
        this.imgSrc = "assets/images/image.jpg";
      });
  }

<ul class="result__image--tabslist">
            <li class="result__image--tab left left__tab" (click)="loadImg('output')">
                <span class="result__tab--txt" [ngClass]="toggleClick?'selected':''">
                    Scan
                </span>
            </li>
            <li class="result__image--tab left" (click)="loadImg('input')">
                <span class="result__tab--txt" [ngClass]="toggleClick?'':'selected'">
                    Original
                </span>
            </li>
</ul>

Answer 1

Вы можете попробовать:

[class]="toggleClick?'selected':''"

или,

[ngClass]="{'selected': toggleClick}"

или,

[class.selected]="toggleClick"

Answer 2

Вы можете попробовать с

[class.selected]="toggleClick"

вместо

[ngClass]="toggleClick?'':'selected'"

Таким образом, класс selected применяется только в том случае, еслиtoggleClick верно.