Блог

Главная - Вопросы по программированию - Angular 6: как отобразить значение вложенного массива как матричный способ?

Angular 6: как отобразить значение вложенного массива как матричный способ?

#angular #multidimensional-array #angular-material

#angular #многомерный массив #angular-материал

Вопрос:

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

 Lorium 001
Lorium 002
Lorium 003
----------
Ipsum 001
Ipsum 002
Ipsum 003

В настоящее время он генерируется в одну строку, как показано ниже.

 Lorium
001
002
003
Ipsum
001
002
003

Фрагмент кода, а также, пожалуйста, просмотрите рабочую демонстрацию StackBlitz

 <div class="container">
    <div class="row" *ngFor="let element of data">
        <div class="col s4">
            <mat-form-field class="">
                <input matInput type="text" value={{element.value}} readonly>
        </mat-form-field>
        </div>
        <div class="sub-collection">
            <div class="col s4" *ngFor="let subElement of element.sizes">
                <mat-form-field class="">
                    <input matInput type="text" value={{subElement.subValue}} readonly>
        </mat-form-field>
            </div>
        </div>
    </div>
</div>

Ответ №1:

Попробуйте

 <div class="container">
    <div class="row" *ngFor="let element of data; let first = first">
    <div *ngIf="!first">----------</div>
    <ng-container *ngFor="let subElement of element.sizes">
      <div class="col s4">
        <mat-form-field class="">
          <input matInput type="text" value={{element.value}} readonly>
        </mat-form-field>
        <mat-form-field class="">
          <input matInput type="text" value={{subElement.subValue}} readonly>
        </mat-form-field>
      </div>
    </ng-container>
    </div>
</div>

Смотрите Модифицированный stackblitz: https://stackblitz.com/edit/angular-dxyzqb?file=src/app/app.component.html

Комментарии:

1. Большое вам спасибо за ваш ценный ответ!!! Это работает так, как я ищу. Кстати, вы не поняли эту концепцию let first = first ? Это концепция индексации?

2. first является локальной переменной ngForOf директивы. Вы не можете использовать его, если не назначите его. Вы также можете написать, например let isFirst = first , чтобы избежать путаницы в именовании. Читать дальше angular.io/api/common/NgForOf#local-variables