Как обрабатывать неопределенные массивы в Angular для разных шаблонов? - PullRequest
Новая
       11

Как обрабатывать неопределенные массивы в Angular для разных шаблонов?

3 голосов
/ 28 февраля 2020

Я работаю на экране поиска приложения. Я полагаю, что в разделе результатов есть три результата.

  • Если пользователь не пытался выполнить поиск, ничего не отображается.
  • Если пользователь попытался выполнить поиск, а массив пусто, затем отобразите «нет результатов».
  • Если пользователь попытался выполнить поиск и массив не пуст, тогда l oop снова и отобразит результаты.

I может получить пустую и непустую работу просто отлично: 

<ng-container *ngIf="results.length">
    <div class="result" *ngFor="let result of results">
        <a href="link-goes-here">Open Result</a>
        <search-result  [result]="result"></search-result>
    </div>
</ng-container>
<ng-container #elseBlock>
    No Results dude.
</ng-container>

Но, когда я пытаюсь смешать в проверке, если results равно undefined, это, кажется, не работает должным образом. Я пытался использовать [ngSwitch], но это тоже не сработало. Я мог бы просто создать логическую переменную, которая сначала будет ложной, а затем установить значение true после выполнения поиска, но я бы предпочел, чтобы мой массив начинался как неопределенный, а затем был назначен после первого поиска.

Ответы [ 2 ]

2 голосов
/ 28 февраля 2020

вам необходимо использовать оператор безопасной навигации ?. в случае, если результат равен нулю или не определен elseBlock будет отображаться 

<ng-container *ngIf="results?.length;else elseBlock">
    <div class="result" *ngFor="let result of results">
        <a href="link-goes-here">Open Result</a>
        <search-result  [result]="result"></search-result>
    </div>
</ng-container>

<ng-template #elseBlock>
    No Results dude.
</ng-template>
1 голос
/ 29 февраля 2020

Это должно охватывать ваши три результата. Предполагая, что результаты являются нулевыми или неопределенными по умолчанию, мы сначала проверяем, если они выходят. Если это так, проверьте, есть ли у него какие-либо значения или нет. Если пользователь еще не выполнил поиск, * ngIf вернет false и не будет ничего отображать. 

<ng-container *ngIf="results">
    <ng-container *ngIf="results.length > 0; else elseBlock >
       <div class="result" *ngFor="let result of results">
          <a href="link-goes-here">Open Result</a>
          <search-result  [result]="result"></search-result>
       </div>
    </ng-container>

    <ng-template #elseBlock>
        No Results dude.
    </ng-template>

</ng-container>
...