मैं कुछ वस्तुओं को 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 घटक, आइटम-हेडर और आइटम-कंटेंट बना सकता हूं। हालांकि मैं वास्तव में उस लॉगिन को एक घटक में रखना चाहता हूं।

6
lostintranslation 28 फरवरी 2020, 21:28
2
क्या *ngFor को <mat-accordion पर रखने से अतिरिक्त तत्व की समस्या का समाधान नहीं होगा?
 – 
JMP
28 फरवरी 2020, 21:43
1
क्या वह प्रत्येक आइटम के लिए एक अकॉर्डियन नहीं बनाएगा?
 – 
lostintranslation
28 फरवरी 2020, 21:46
1
एनजीफॉर ऑन अकॉर्डियन कई अकॉर्डियन तत्व बनाता है, यह सही नहीं है, केवल एक होना चाहिए।
 – 
lostintranslation
28 फरवरी 2020, 21:55
1
टेम्पलेट से बाहर <चटाई-विस्तार-पैनल> लें और उस पर लूप करें? अंतिम अनुमान!
 – 
JMP
28 फरवरी 2020, 21:56
1
 – 
Kaustubh Badrike
28 फरवरी 2020, 23:24

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;
  }
}
5
Thierry Falvo 9 मार्च 2020, 21:44
अच्छी पकड़ - मैंने अपने उत्तर में स्टाइलिंग में बहुत ही मामूली त्रुटियों को पूरी तरह से याद किया। एक बेहतर उत्तर के रूप में ऊपर उठाया गया।
 – 
TotallyNewb
10 मार्च 2020, 16:44
मैंने सीएसएस को थोड़ा बदल दिया है, भाग बदल दिया है: & > .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 का उपयोग करने की आवश्यकता नहीं है
 – 
Damian Pioś
17 फरवरी 2021, 11:52

कोड को देखकर, मुझे लगता है कि आपकी समस्या इस से आती है:

<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>
-1
Sidson Aidson 5 मार्च 2020, 13:07

क्यों न 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>

मैं स्टैकब्लिट्ज से एक लिंक साझा करने का प्रयास कर रहा था, लेकिन दुर्भाग्य से ऐसा लगता है कि हमारे पास साझा करने के साथ एक बग है, इसलिए मैं अपने मतलब का एक स्क्रीनशॉट साझा करने जा रहा हूं:

enter image description here

संपादित करें: ऐसा लगता है कि स्टैकब्लिट्ज ने अब सहयोग करने का फैसला किया है। यहां लिंक है: https://stackblitz.com/edit/angular-ae7cfr

-2
Guilherme Taffarel Bergamin 14 अप्रैल 2020, 13:57
अन्य टिप्पणियों के साथ प्रश्न को फिर से जांचें। समस्या यह है कि यह अतिरिक्त एचटीएमएल तत्व के कारण पैनलों के लिए सीएसएस स्टाइल को गड़बड़ कर देता है।
 – 
lostintranslation
7 अप्रैल 2020, 18:41
@lostintranslation, मैं चाहूंगा कि यदि आप में से कोई एक डाउनवोट आपके पास से आया है, तो भी आप इस पर पुनर्विचार करें, भले ही इस उत्तर ने आपकी मदद न की हो। इसका कारण यह है कि मेरा उत्तर वास्तव में एक नए तत्व का परिचय नहीं देता है और वास्तव में अन्य उत्तरों से अलग है। अपने प्रश्न में, आप एक रैपिंग डिव के लिए एनजी। सिडसन एडसन और कौस्तुभ बद्रीके एक रैपिंग एनजी-कंटेनर के लिए। TotallyNewb एनजीउस घटक के लिए जिसमें विस्तार पैनल है (अनिवार्य रूप से एक रैपिंग एनजी-कंटेनर के समान)। मेरा एनजीविस्तार पैनल के लिए सीधे और आप इसे एक घटक के रूप में उपयोग कर सकते हैं जिसमें एक इनपुट के रूप में सूची है।
 – 
Guilherme Taffarel Bergamin
11 अक्टूबर 2020, 01:19

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 चयनकर्ता के साथ '[आइटम]' के रूप में

-2
Kaustubh Badrike 28 फरवरी 2020, 23:28
1
बहुत यकीन है कि आप किसी अन्य घटक पर एक विशेषता चयनकर्ता लागू नहीं कर सकते हैं। त्रुटि "इस तत्व पर एक से अधिक घटक मेल खाते हैं। सुनिश्चित करें कि केवल एक घटक का चयनकर्ता किसी दिए गए तत्व से मेल खा सकता है।"
 – 
lostintranslation
28 फरवरी 2020, 23:33
मेरा बुरा। अनुपयोगी उत्तरों को पोस्ट नहीं करना चाहिए था।
 – 
Kaustubh Badrike
28 फरवरी 2020, 23:45

आप लगभग वहीं थे। आपको किसी रैपिंग तत्व की आवश्यकता नहीं है - आप सीधे अपने घटक पर *ngFor का उपयोग कर सकते हैं:

<mat-accordion>
    <item *ngFor="let item of items" [item]="item"></item>
</mat-accordion>

वर्किंग कोड के सरल उदाहरण के साथ वर्किंग स्टैक-ब्लिट्ज: https://stackblitz.com/edit/angular-pvse7t

4
TotallyNewb 9 मार्च 2020, 12:53
हाँ, लगता है कि आपने इसे नीचे पकड़ा है, अतिरिक्त घटक तत्व के साथ सीएसएस सही नहीं है।
 – 
lostintranslation
11 मार्च 2020, 03:55