क्लिक करें घटना पर ngfor पाश चल रहा है दो बार. कोणीय

Question 1

मैंने पाया एक दिलचस्प समस्या है कि मैं नहीं कर सकते हैं बाईपास.

मैं follwing *ngFor पाश एक क्लिक घटना के साथ.

<label class="input-group" *ngFor="let status of statuses; trackBy: id"
    (click)="filterByCategory(status.name)">{{ status.name }}
    <span class="chip chip-icon" [attr.data-chip-state]="status.name">
    {{ partners | counter: status.name }}</span>
    <input type="checkbox" />
    <span class="checkmark"></span>
</label>

क्लिक घटना, एफ एन filterByCategory() एक सरल प्रक्रिया है, के लिए जिम्मेदार जोड़ें या निकालें स्ट्रिंग एक सरणी से करने के लिए, तो फिल्टर वस्तुओं की एक सरणी.

  filterByCategory(category, event: Event) { 
    let verify = this.filterArr.includes(category);
   
    if (!verify) { 
      this.filterArr.push(category)
    } else {    
      let indexOfCategory = this.filterArr.indexOf(category);
      this.filterArr.splice(indexOfCategory, 1);
    } 
  
    this.filteredPartners = this.partners.filter(partner => {
      return this.filterArr.includes(partner.partner_status.name);
    }) 
  }

जब घटना निकाल दिया जाता है, इसे चलाता है दो बार और बयान अगर पहली कहते हैं स्ट्रिंग और फिर इसे हटा ।

किसी भी एक है एक तरह से हल करने के लिए यह?

धन्यवाद!

Question 2

मुझे विश्वास है कि यह है क्योंकि आप संलग्न click घटना श्रोता के लिए label. यदि आप लेबल पर क्लिक करें आप ट्रिगर घटना पहली बार के लिए है, लेकिन फिर चेकबॉक्स क्लिक किया जा रहा है और यह चलाता है एक बार फिर से click घटना है.

क्योंकि आप का उपयोग कर रहे हैं label यहाँ आप कर सकते हैं स्वतंत्र रूप से स्थानांतरित click श्रोता के लिए checkox. तो बजाय तुम क्या है के साथ, आप यह कर सकते हैं इस तरह:

<label class="input-group" *ngFor="let status of statuses; trackBy: id">{{ status.name }}
<span class="chip chip-icon" [attr.data-chip-state]="status.name">
{{ partners | counter: status.name }}</span>
<input type="checkbox" (click)="filterByCategory(status.name)" />
<span class="checkmark"></span>

KamLar · Answer 1 · 2021-11-20T19:37:54

मुझे विश्वास है कि यह है क्योंकि आप संलग्न click घटना श्रोता के लिए label. यदि आप लेबल पर क्लिक करें आप ट्रिगर घटना पहली बार के लिए है, लेकिन फिर चेकबॉक्स क्लिक किया जा रहा है और यह चलाता है एक बार फिर से click घटना है.

क्योंकि आप का उपयोग कर रहे हैं label यहाँ आप कर सकते हैं स्वतंत्र रूप से स्थानांतरित click श्रोता के लिए checkox. तो बजाय तुम क्या है के साथ, आप यह कर सकते हैं इस तरह:

<label class="input-group" *ngFor="let status of statuses; trackBy: id">{{ status.name }}
<span class="chip chip-icon" [attr.data-chip-state]="status.name">
{{ partners | counter: status.name }}</span>
<input type="checkbox" (click)="filterByCategory(status.name)" />
<span class="checkmark"></span>

आप पूरी तरह से सही थे! वास्तव में वह हिस्सा नहीं था मेरे मन को पार के बाद से इनपुट है प्रदर्शन:कोई नहीं, मैं भूल गया कि लेबल पूछ रहा है कोणीय चलाने के लिए, यहां तक कि दो बार के बाद से बदल गया है की जाँच करें! धन्यवाद Kamlar!

क्लिक करें घटना पर ngfor पाश चल रहा है दो बार. कोणीय

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में