मैं *ngFor का उपयोग करके आबादी वाले बाल घटकों के बीच एक मान कैसे पास करूं?

मैंने @output डेकोरेटर पैटर्न का उपयोग करने का प्रयास किया है और इसके परिणामस्वरूप गलत व्यवहार होता है।

  1. @output का सही उपयोग कैसे करें। अपेक्षित परिणाम क्यों नहीं मिलते। ?
  2. क्या डेटा मॉडल को बदलने के अलावा इस कार्यक्षमता को हासिल करने का कोई और तरीका है?

एक JSON सरणी निर्दिष्ट है app.component.ts और इसमें फ़ील्ड वेतन है। मैं कुल क्षेत्र वेतन प्रदर्शित करना चाहता हूं क्योंकि हम सरणी के माध्यम से लूप करते हैं और इसे बाल घटक में प्रदर्शित करते हैं।

यहां लक्ष्य कुल वेतन को गतिशील रूप से प्रिंट करना है क्योंकि तत्व पुनरावृत्त होते हैं। मैं बच्चे के कुल वेतन की गणना करके @output डेकोरेटर का उपयोग करके इसे प्राप्त करने का प्रयास करता हूं और फिर इसे माता-पिता को भेजता हूं।

App.component.html

<div *ngFor="let person of persons">
<app-child [name]="person.name" [salary]= "person.salary" [totalsalary] = "totalsalary" 
(totalSalary)="setTotalSalary($event)">

 </app-child>
 <div>

  import { Component, Input } from '@angular/core';

App.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @Input() totalsalary:number=0;

persons = [{
  "name":"x",
  "salary":1
},{
  "name":"s",
  "salary":2
},
{
  "name":"y",
  "salary":2
}
]
setTotalSalary(totalSalary:number) {
 //   console.log("total  salary" +this.totalsalary)
  this.totalsalary = totalSalary;
}
}

Child.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() name!:string;
  @Input() salary!:number;
  @Input() totalsalary!:number;
  @Output() totalSalary = new  EventEmitter<number>();

  constructor() { }

  ngOnInit(): void {
  }

  displayTotalSalary() {
    console.log("current salary"+this.salary)
    console.log("total  salary" +this.totalsalary)
let sum = Number(this.salary) + Number(this.totalsalary)
    this.totalSalary.emit(sum);
    return  Number(sum)
  }

}

Child.component.html

<p>{{name}}</p>
<p>{{salary}}</p>
<p>{{displayTotalSalary()}}</p>

अपेक्षित परिणाम :

x

1

1

s

2

3

y

2

5

प्राप्त :

x

1

6

s

2

8

y

2

10
1
Sree 9 जिंदा 2021, 16:04
1
तो आप पिछला वेतन लेना चाहते हैं और वर्तमान वेतन जोड़ना चाहते हैं और इसे उस UI में दिखाना चाहते हैं? यदि ऐसा है तो आप अपने डेटासेट स्तर पर कुल की गणना क्यों नहीं करते।
 – 
Vimal Patel
9 जिंदा 2021, 16:34
बस मेरे विकल्पों की खोज करना और सामान सीखने की कोशिश करना। आदर्श रूप से आप जो कहते हैं वह सही है।
 – 
Sree
9 जिंदा 2021, 17:20

1 उत्तर

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

displayTotalSalary() को प्रत्येक बच्चे के लिए दो बार कॉल किया जा रहा है, पहली बार प्रत्येक बच्चे के लिए (totalSalary से 1+2+2 =5 तक) और फिर प्रत्येक बच्चे के लिए इसलिए आपको 5+1= मिल रहा है। 6, 6+2=8 और 8+2=10.

ऐसा इसलिए है क्योंकि टेम्प्लेट में फ़ंक्शन कॉल displayTotalSalary(), कॉल को टेम्प्लेट से ts फ़ाइलों में ले जाने से समस्या ठीक हो जाती है।

ngOnInit(): void { this.salaryToDisplay = this.displayTotalSalary(); }

और चाइल्ड टेम्प्लेट में <p>{{salaryToDisplay}}</p> का उपयोग करें

यह जानने के लिए कि टेम्पलेट में फ़ंक्शन कॉल को कई बार क्यों कहा जा रहा है।

2
Ashish Dahiya 9 जिंदा 2021, 18:19