Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/30.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular EventEmitter未发射角度为9的对象_Angular_Output_Eventemitter - Fatal编程技术网

Angular EventEmitter未发射角度为9的对象

Angular EventEmitter未发射角度为9的对象,angular,output,eventemitter,Angular,Output,Eventemitter,我的应用程序架构主要基于输出和输入。一切正常,直到我偶然发现这个问题:我有一个动态组件,用户可以在其中编写电影评论,但我发送给负责与API通信的组件的对象没有收到任何东西,我也不知道为什么。是因为动态创造吗?这是密码 将审查发送到API的组件的HTML <div *ngIf="movie"> <div *ngFor="let m of movie"> Details of {{m.Title}} </div&

我的应用程序架构主要基于输出和输入。一切正常,直到我偶然发现这个问题:我有一个动态组件,用户可以在其中编写电影评论,但我发送给负责与API通信的组件的对象没有收到任何东西,我也不知道为什么。是因为动态创造吗?这是密码

将审查发送到API的组件的HTML

<div *ngIf="movie">
  <div *ngFor="let m of movie">
    Details of {{m.Title}}

  </div>
  <button (click)="createReview()" mat-raised-button color="primary">Write your own review!</button>
  <template #usersreview>
    <app-reviews [movie]="movie" (sendCreds)="credentialsReceived($event)"></app-reviews>
</template>

  </div>

{{m.Title}的详细信息
写你自己的评论!
TS:

导出类RightMovieComponent实现OnInit{
@Input()电影:任意[]
@ViewChild('usersreview',{read:ViewContainerRef,static:false})容器;
componentRef:componentRef
构造函数(私有位置:位置,私有解析器:ComponentFactoryResolver){}
ngOnInit():void{
}
createReview(){
this.container.clear();
常量工厂:ComponentFactory=this.resolver.resolveComponentFactory(ReviewComponent);
this.componentRef=this.container.createComponent(工厂);
this.componentRef.instance.movie=this.movie;
}
已收到证书(审核:任何){
log(review)--->控制台上没有任何内容,没有错误,没有内容
//this.componentRef.destroy();-->
警报(“提交审查!”);
}
}
审查部分的TS

@Input() movie: any[];
  @Output() sendCreds: EventEmitter<any> = new EventEmitter<any>();
  user: User;
  reviewForm: FormGroup;
  movieTitle:any;

  constructor(private auth: AuthService, private fb: FormBuilder) {
    this.auth.currentUser.subscribe((user) => (this.user = user));
  }

  ngOnInit(): void {
    this.reviewForm = this.fb.group({
      title: ['', Validators.required],
      body: ['', Validators.required],
    });
  }
  get title() {
    return this.reviewForm.get('title');
  }
  get body() {
    return this.reviewForm.get('body');
  }

  onSubmit() {
    if (this.reviewForm.invalid) return;
     this.movieTitle = this.movie.map((t) => t['Title']);
    let credentials = {
      author: this.user.username,
      title: this.title.value,
      body: this.body.value,
      movieTitle: this.movieTitle[0],
    };
    this.sendCreds.emit({creds:credentials}); ------>here the the object is displayed on the console
    this.reviewForm.reset();
  }
@Input()电影:任意[];
@Output()sendCreds:EventEmitter=neweventemitter();
用户:用户;
评审形式:FormGroup;
电影名称:任何;
构造函数(私有auth:AuthService,私有fb:FormBuilder){
this.auth.currentUser.subscribe((user)=>(this.user=user));
}
ngOnInit():void{
this.reviewForm=this.fb.group({
标题:['',验证器。必填],
正文:['',验证器。必填],
});
}
获取标题(){
返回此.reviewForm.get('title');
}
获取body(){
返回此.reviewForm.get('body');
}
onSubmit(){
如果(此.reviewForm.invalid)返回;
this.movieTitle=this.movie.map((t)=>t['Title']);
让凭据={
作者:this.user.username,
标题:this.title.value,
body:this.body.value,
movieTitle:this.movieTitle[0],
};
this.sendCreds.emit({creds:credentials});------>在这里,对象显示在控制台上
这个.reviewForm.reset();
}

任何帮助都将不胜感激

动态创建组件时,您需要定义与事件发射器的通信(正如您定义的与输入的通信):

this.componentRef.instance.sendCreds.subscribe(event => // do whatever);

动态创建组件时,您需要定义与事件发射器的通信(正如您定义的与输入的通信):

this.componentRef.instance.sendCreds.subscribe(event => // do whatever);

你能给我分享一下应用程序审查模板吗?-@Mellville你能给我分享一下应用审查模板吗@梅尔维尔谢谢!当然有道理!当然有道理