मेरे पास एक ऐसा मामला है जहां मैं एक बटन पर एक सरणी (मूल घटक में) से एक घटक का एक उदाहरण निकालना चाहता हूं, कुछ शर्त के आधार पर बच्चे के घटक के अंदर से क्लिक करें।

enter image description here

छवि में, 'बीयू जोड़ें' बटन मूल घटक में है और नीचे तीन टेक्स्ट फ़ील्ड (अर्थात् 'बीयू', 'जी वैल्यू' और 'सी वैल्यू') और एक क्रॉस बटन चाइल्ड कंपोनेंट से आ रहा है। प्रत्येक 'बीयू जोड़ें' बटन पर यूआई में चाइल्ड कंपोनेंट की एक नई पंक्ति पर क्लिक करें। मैंने बच्चे के उदाहरणों को माता-पिता में सरणी में धक्का देने के लिए निम्न कोड का उपयोग किया:

enter image description here

enter image description here

अब मेरे यहां 2 बिंदुओं के बारे में प्रश्न हैं: - 1. मैं माता-पिता में सरणी से एक ही विशिष्ट बच्चे के उदाहरण को कैसे हटा सकता हूं, उसी उदाहरण पर क्रॉस बटन क्लिक करें (क्रॉस बटन बच्चे के अंदर है)? 2. मैं 'जोड़ें' बटन क्लिक पर प्रत्येक पंक्ति (यानी 'बीयू', 'जी वैल्यू' और 'सी वैल्यू') में प्रत्येक टेक्स्ट फ़ील्ड में जोड़े गए मूल्यों को कैसे भेज सकता हूं?

कुछ इसी तरह के प्रश्न यहां पहले ही पूछे जा चुके हैं और मैंने स्वीकृत उत्तर में दिए गए समान दृष्टिकोण का उपयोग किया है: angular2 में बटन के क्लिक पर डोम में घटक जोड़ें। और मेरा पहला प्रश्न भी नीचे दी गई छवि में अंतिम टिप्पणी के रूप में पूछा जा रहा है:

enter image description here

0
Raj 10 अप्रैल 2020, 13:20

1 उत्तर

सबसे बढ़िया उत्तर

चाइल्ड इंस्टेंस को हटाने के लिए:

<payment-option
    *ngFor="let bu of buList; index as i"
    (delete)="removeBU(i)>
</payment-option>
removeBU(i: number) {
  this.buList.splice(i, 1);
}

जोड़ने पर डेटा प्राप्त करने के लिए:

@ViewChildren(PaymentOptionComponent) paymentOptionComps!: QueryList<PaymentOptionComponent>;

add() {
  const data = {};
  this.paymentOptionComps.forEach(comp => {
    // Get data from comp and add to data here.
  });
}
1
Collierre 10 अप्रैल 2020, 13:47