#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