Я работаю в проекте Angular, в котором я пытаюсь -
отправить данные из дочернего компонента в родительский компонент. Я столкнулся с проблемой при этом, так как получаю ошибку. Я использовал директиву @output.чтобы передать дочерние данные родительскому компоненту, я помещаю ошибку ниже
error is >>
EventEmitter {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
closed: false
hasError: false
isStopped: false
observers: [Subscriber]
thrownError: null
__isAsync: false
_isScalar: false
__proto__: Subject
Я делюсь своим кодом ниже
дочерний компонент ts file
export class LivematchesComponent implements OnInit {
matchData:any = [1];
token:any;
jsonData: any;
@Output() contestId: EventEmitter<any> = new EventEmitter<any>();
@Input() matchUid: any;
@Input() matchstatus: any;
@Input() sportsType: any;
constructor(private _route: ActivatedRoute , private router: Router , private rest:ServicesService) { }
ngOnInit() {
console.log(this.matchUid);
console.log(this.matchstatus);
console.log(this.sportsType);
this.loaddata();
}
loaddata(){
this.token = 'Bearer ' + localStorage.getItem('putoken');
let liveContestsBody = { matchId: this.matchUid, matchStatus: this.matchstatus,};
this.rest.getLiveContests(liveContestsBody,this.token).then(
result => {
this.jsonData = result;
console.log('Live match data ');
console.log(this.jsonData);
console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
if (this.jsonData.status == '1') {
this.matchData = this.jsonData.data;
console.log(this.matchData.contestId);
} else {
console.log('No data found');
}
},
err => {
this.router.navigate(['ErrorPage']);
console.log('connection failed');
}
);
}
goToMatchCenter(){
this.router.navigate(['/matchcenter/cricket/1']);
}
goCashContest(contestId) {
alert('hello');
// this.contestId = contestId;
this.contestId.emit(this.contestId);
console.log(this.contestId);
alert('hello');
}
}
child.html
<div *ngFor="let match of matchData; let i = index" (click)="goCashContest(match.contestId)">
<h3 style='color:#fff ; text-align: center'> Leader Board </h3>
<div>
<div class='mar'>
<p class='fr'>Winners</p>
<p style='color:#fff'>{{ match.totalWinners }}</p>
</div>
</div>
Parent.ts
export class MatchdetailsComponent implements OnInit {
contestId: any;
constructor(private _route: ActivatedRoute , private router: Router , private rest:ServicesService) { }
ngOnInit() {
}
goCashContest(contestId:any) {
alert('hello');
console.log('contest data >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
console.log(contestId);
this.contestId = contestId;
console.log('this');
console.log(this.contestId);
alert('go cash contest');
// this.router.navigate(['/cashcontest' , this.matchUid , contestId , this.sportsType , this.matchstatus ]);
}
parent.html
<app-livematches (contestId)="goCashContest($event)" [matchUid]='matchUid' [matchstatus]='matchstatus' [sportsType]='sportsType' > </app-livematches>