मैं कुछ वस्तुओं को ngFor के साथ लूप करने और प्रत्येक आइटम के लिए एक चटाई-विस्तार-पैनल बनाने की कोशिश कर रहा हूं।
मैं प्रत्येक आइटम के लिए एक आइटम घटक में तर्क को समाहित करना चाहता हूं:
<item></item>
प्रारंभिक प्रयास:
<mat-accordion>
<div *ngFor="let item of items" >
<item [item]="item"></item>
</div>
</mat-accordion>
जहां आइटम टेम्पलेट है:
<mat-expansion-panel>
<mat-expansion-panel-header>
Header Content
</mat-expansion-panel-header>
<div>
Expandable content
</div>
</mat-expansion-panel>
इस दृष्टिकोण के साथ समस्या यह है कि मेरे घटक के लिए <mat-accordion> और <mat-expansion-panel> के बीच एक अतिरिक्त HTML तत्व है, जो समझौते के लिए सीएसएस को गड़बड़ कर देता है।
क्या कोई तरीका है कि मेरा घटक शीर्षलेख और सामग्री प्रदान कर सकता है?
<mat-accordion>
<div *ngFor="let item of items" >
<mat-expansion-panel>
<mat-expansion-panel-header>
<!-- put item component header here->
</mat-expansion-panel-header>
<div>
<!-- put item component content here->
</div>
</mat-expansion-panel>
</div>
</mat-accordion>
मैंने एनजी-कंटेंट पर पढ़ा है, लेकिन मुझे लगता है कि मैं जो चाहता हूं उससे पीछे की ओर है, मैं अपने घटक में कस्टम सामग्री नहीं डालना चाहता, मैं अपने घटक से तत्वों को निकालना चाहता हूं और उन्हें माता-पिता में प्रस्तुत करना चाहता हूं।
मुझे एहसास है कि मैं 2 घटक, आइटम-हेडर और आइटम-कंटेंट बना सकता हूं। हालांकि मैं वास्तव में उस लॉगिन को एक घटक में रखना चाहता हूं।
5 जवाब
मुझे एक ही समस्या का सामना करना पड़ा। इस विषय पर एक पुल अनुरोध खोला गया है लेकिन कभी विलय नहीं हुआ। हम नीचे इस कोड को जोड़कर लेआउट (सीमा त्रिज्या) में थोड़ा सुधार कर सकते हैं। चीजों को सरल रखने के लिए, सबसे अच्छा हम पहले और आखिरी पैनल के ऊपर और नीचे border-radius को पुनर्स्थापित करना है।
लेकिन पिछले पैनल के निचले हिस्से का विस्तार नहीं होने और अगले पैनल के शीर्ष का विस्तार नहीं होने के लिए यह अधिक कठिन है ...
मुख्य घटक.एचटीएमएल:
<mat-accordion class="custom-accordion">
<item *ngFor="let item of items" [item]="item"></item>
</mat-accordion>
आइटम.घटक.टीएस:
@Component({
selector: 'app-item',
template: `
<mat-expansion-panel>
<mat-expansion-panel-header>
Header Content
</mat-expansion-panel-header>
<div>
Expandable content
</div>
</mat-expansion-panel>
`,
host: {
'class': 'expansion-panel-wrapper',
'[class.expanded]': 'expansionPanel && expansionPanel.expanded',
}
})
export class ItemComponent {
@ViewChild(MatExpansionPanel, { static: false }) expansionPanel;
...
}
Styles.scss में:
.custom-accordion.mat-accordion {
.expansion-panel-wrapper:first-of-type .mat-expansion-panel {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
& > :not(.expanded) .mat-expansion-panel {
border-radius: 0;
}
& > .expansion-panel-wrapper:last-of-type > .mat-expansion-panel {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
}
& > .expansion-panel-wrapper:first-of-type > .mat-expansion-panel {border-top-right-radius: 4px; border-top-left-radius: 4px;} & > .expansion-panel-wrapper > .mat-expansion-panel:not(.mat-expanded) { border-radius: 0;} अब हमें @ViewChild और host.class-expanded का उपयोग करने की आवश्यकता नहीं है
कोड को देखकर, मुझे लगता है कि आपकी समस्या इस से आती है:
<mat-accordion>
<div *ngFor="let item of items" > **//this right here creates a 'div' element for each loop**
<item [item]="item"></item>
</div>
</mat-accordion>
इसके बजाय div को ng-container से बदलने का प्रयास करें:
<mat-accordion>
<ng-container *ngFor="let item of items" > **//ng-container is never rendered in the DOM**
<item [item]="item"></item>
</ng-container>
</mat-accordion>
क्यों न ngFor को सीधे विस्तार पैनल पर लागू किया जाए?
<mat-accordion>
<mat-expansion-panel *ngFor="let item of items">
<mat-expansion-panel-header>
<mat-panel-title>
Header Content
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
Expandable Content
</ng-template>
</mat-expansion-panel>
</mat-accordion>
मैं स्टैकब्लिट्ज से एक लिंक साझा करने का प्रयास कर रहा था, लेकिन दुर्भाग्य से ऐसा लगता है कि हमारे पास साझा करने के साथ एक बग है, इसलिए मैं अपने मतलब का एक स्क्रीनशॉट साझा करने जा रहा हूं:
संपादित करें: ऐसा लगता है कि स्टैकब्लिट्ज ने अब सहयोग करने का फैसला किया है। यहां लिंक है: https://stackblitz.com/edit/angular-ae7cfr
https://stackoverflow.com/a/38716164/11928194 से कोशिश
<mat-accordion>
<ng-container *ngFor="let item of items" >
<mat-expansion-panel item [item]="item"></mat-expansion-panel>
</ng-container>
</mat-accordion>
ItemComponent चयनकर्ता के साथ '[आइटम]' के रूप में
आप लगभग वहीं थे। आपको किसी रैपिंग तत्व की आवश्यकता नहीं है - आप सीधे अपने घटक पर *ngFor का उपयोग कर सकते हैं:
<mat-accordion>
<item *ngFor="let item of items" [item]="item"></item>
</mat-accordion>
वर्किंग कोड के सरल उदाहरण के साथ वर्किंग स्टैक-ब्लिट्ज: https://stackblitz.com/edit/angular-pvse7t