как использовать содержимое переменной для условий * ngIf внутри * ngFor l oop? - PullRequest
Новая
       31

как использовать содержимое переменной для условий * ngIf внутри * ngFor l oop?

0 голосов
/ 10 апреля 2020

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

Что-то как это вообще возможно? 

<ng-container *ngFor="let APP of APPLIST">
    <a [attr.href]="APP.link" [ngIf]="{{APP.showIf}}">
      <div class="border">
        <section class="linkTile">
          <figure class="icon">
            <p id="beta">{{ APP.cornertag }}</p>
            <img
              src="../../assets/images/{{ APP.icon }}.png"
              alt="{{ APP.iconAlt }}"
            />
            <figcaption class="flourishFont">{{ APP.name }}</figcaption>
          </figure>
          <aside>
            {{ APP.description }}
          </aside>
        </section>
      </div>
    </a>
</ng-container>

Я использую json для ввода массива в мой APPLIST, это выглядит так: 

{
  "apps": [
    {
      "name": "Tile",
      "link": "PRE_TILE",
      "description": "A description of the App",
      "icon": "imageName",
      "iconAlt": "imageDescriptionForAltText",
      "cornertag": "1wordfortopleftcorner",
      "showIf": "!this.hasLoggedIn"
    }
  ]
}

Теперь мои переменные showIf являются сложными У меня есть 4 логических значения, которые я отслеживаю, и несколько массивов, чтобы проверить, содержат ли они флаг или нет.

Вот флаги, которые я использую: 

this.hasLoggedIn
this.isSpecialUser
this.isSuperSpecial
this.ARRAY1.indexOf(ARRAY2.field) !== -1
this.UserList.indexOf(ARRAY3.field) !== -1
this.UserClass.includes('nameOfClass')

Как мне сделать это? Я предпочтительно хочу дать ngIf содержимое моей переменной, потому что мне не нужно проверять все флаги для всех плиток. Я также не могу проверить всех из них, а затем проверить, является ли какой-либо из них истинным или ложным ...

Например, у меня есть тайл, который проверяет: 

*ngIf="
  this.isSuperSpecial ||
  this.isSpecialUser ||
  this.UserClass.includes('foo') ||
  this.aFewUserIDNumbers.indexOf(this.userInfo.userID) !== -1
"

Но есть еще один: 

*ngIf="
  this.UserClass.includes('bar') ||
  this.UserList.indexOf(ARRAY3.field) !== -1
"

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

...