当前这两个组件是子组件，所以我在这里要实现的是将props从Search组件传递到Images组件。因为我在功能组件中编写了所有内容，所以我认为这对我来说可能是个好地方
当用户在输入字段中输入内容时，它将自动搜索新图像。为了使您更好地理解我的问题，我将在此处放置指向Codesandbox的链接。因此，我想将道具传递给同级组件，以便它将输出经过过滤的搜索结果。
https://codesandbox.io/s/patient-dawn-khouk
所以只有您需要查看的文件是：Search.js，Images.js
答案 0 :(得分：0)
确保您的export class propertyAnalysisDetailComponent implements OnInit {
fields: any[] = []; //these are the formFields we get from sbDocField service
// will be based on template type
@Input() detailFormGroup: FormGroup;
@Input()paVer : propertyAnalysisVersion;
@Output() emitPass: EventEmitter<propertyAnalysisVersion>= new EventEmitter<propertyAnalysisVersion>();
constructor(private fieldService: sbDocFieldAPI
, private sbDFservice: sbDocFieldService
, private fb: FormBuilder) {
var i: number;
i = 3;
}
ngOnInit() {
this.getAllDocFields();
this.patchControls(this.paVer);
}
getAllDocFields() {
this.fieldService.getDocFields().subscribe(
(data) => {
console.log(data);
//ask the data service for a list of fields ( this should be specific to a templateId)
this.fields = data;
//now turn those fields into a formGroup
this.detailFormGroup = this.sbDFservice.toFormGroup(this.fields);
});
}
patchControls(paVer_ : propertyAnalysisVersion) {
this.detailFormGroup.patchValue({
propertyName: paVer_.propertyName
, propertyType: paVer_.propertyType
, closeDate: paVer_.closeDate
, purchasePrice: paVer_.purchasePrice
})
}
onSubmit() {
}
constructor(private fieldService: sbDocFieldAPI
, private sbDFservice: sbDocFieldService
, private fb: FormBuilder) {
var i: number;
i = 3;
}
ngOnInit() {
this.getAllDocFields();
//this.patchControls(this.paVer); clearly the wrong place for this call.
}
道具实际上是一个数组。您可以进行一些调试以确定您的images对象实际上是什么吗？
使用propTypes是获得反应帮助的一种方法，如果它可以为空（即不是images），请对其使用防护：
isRequired