Блог

Главная - Вопросы по программированию - Вложенный *ngFor в угловой

Вложенный *ngFor в угловой

#angular #typescript

Вопрос:

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

Вот мой код:

HTML

 <div class="card-header" id = "searchingcardheader">
    <p>{{fetchedData[0].CMPNYNAME}}</p>
  </div>
  <div *ngIf = "containsData">
    <div class="card-body">
      <div style = "width: 70%; margin: auto;" *ngFor = "let data of fetchedData; let i = index">
        <div class="card-header">
          <p>{{cardCheckArray[i]}}</p>
        </div>
        <div class="card-body">
          <p>{{data.DOCUMENT_NAME}}</p>
          <p>{{data.DATE_SUBMITTED | date: 'medium'}}</p>
          <p>{{data.PROCESS_NAME}}</p>
        </div>
      </div>

Я удаляю повторяющиеся значения для имени процесса в моем машинописном тексте. Мне нужно 1 имя процесса в заголовке карты, а затем 2-3 значения в теле карты для каждого заголовка.

Машинописный текст

 var swap = this.fetchedData[0].PROCESS_NAME;

      for (var x in this.fetchedData)
      {
        if(swap == this.fetchedData[x].PROCESS_NAME)
        {
          continue;
        }
        else
        {
          this.cardCheckArray.push(swap);
          swap = this.fetchedData[x].PROCESS_NAME;
        }
      }
this.cardCheckArray.push(swap);

Ответ №1:

Вы используете статический индекс или это было просто для примера? Я имею в виду в этой строке:

 <p>{{fetchedData[0].CMPNYNAME}}</p>

Это пример использования вложенного ngFor:

 <div *ngFor="let item of itemsArray; let i = index">
     <p>{{fetchedData[index].CMPNYNAME}}</p>
     <div *ngFor="let subItem of item.subItems; let j = index">
          <p>{{subItem[j]}}</p>
     </div>
</div>

Ответ №2:

Вот некоторые подходы, использующие угловую материальную карту со статическим array как data и *ngFor

Файл TS

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

/**
 * @title Card with multiple sections
 */
@Component({
  selector: 'card-fancy-example',
  templateUrl: 'card-fancy-example.html',
  styleUrls: ['card-fancy-example.css'],
})
export class CardFancyExample {
 data: Array<Data> =[
    { id: 1_000, name: "First", infoHead: `Title `, infoBody: `Body`, state: true},
    { id: 2_000, name: "First", infoHead: `Title `, infoBody: `Body `, state: false},
    { id: 3_000, name: "First", infoHead: `Title `, infoBody: `Body `, state: true}
   ]
 
 }

interface Data {
  id: number,
  name: string,
  infoHead: string
  infoBody: string,
  state: boolean
}

HTML-файл

 <div *ngFor="let card of data">
  <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>Name: {{ card.name   card.id }}</mat-card-title>
      <mat-card-subtitle>title: {{ card.infoHead   card.id }}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        Name: {{ card.infoBody   card.id }}
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>
  <br>
</div>

Вы можете посетить демо-версию в stackblitz

Метки: