如何将对象传递到Angular 9中的其他组件

我正在使用Angular 9和Spring boot，我正在制作cases模块的创建部分，因为我需要获取一些数据来填充选择输入，微服务工作正常，它从DB获取数据，但试图呈现选择输入，它无法识别变量

这是add-case.ts的唯一元素

ngOnInit(): void {

    this.loading = true;
    this.isLoading.add(
      this.caseService.createCasesFork().subscribe(
        data => {
          this.casesFork = data;
          this.grupos = this.casesFork.groups;
          this.productos = this.casesFork.products;
          this.tipologias = this.casesFork.tipologies;
          this.intenciones = this.casesFork.intentions;
          this.regiones = this.casesFork.regions;

          this.loading = false;
          console.log(this.casesFork.groups);
      
        },
        (error: HttpErrorResponse) => {
          this.alert.errorIzi(error.message);
        }
      ),
      {key: 'loading'}
    )
  } 

到目前为止，它正在发挥作用，它显示了整个团队

问题是我想在其中创建select输入的表单组件，因为该表单是一个组件

这就是我试过的

<select formControlName="grupos">
    <option [value]="grupo" *ngFor="let grupo of grupos">
      {{ grupo.name }}
    </option>
</select>

{{grupo.name}

但是我得到了这个错误

这是表单组件ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Action } from '../../../models/enums';

@Component({
  selector: 'app-cases-form',
  templateUrl: './cases-form.component.html',
  styleUrls: ['./cases-form.component.scss']
})
export class CasesFormComponent implements OnInit {
  @Input() action: Action;
  @Output() submitForm = new EventEmitter<boolean>();
  form: FormGroup;
  methods = Action;
  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.createForm();
  }

  createForm(): void {
    this.form = this.fb.group({
      grupos: ['', Validators.required],
      name: ['', Validators.required],
      field: ['', Validators.required]
    });
  }

  onSubmit(): void {
    if (this.form.valid) {
      this.submitForm.emit(true);
    }
  }
}

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter}；
从'@angular/forms'导入{FormGroup，FormBuilder，Validators}；
从“../../../models/enums”导入{Action}；
@组成部分({
选择器：“应用程序案例表单”，
templateUrl:'./cases form.component.html'，
样式URL:['./cases-form.component.scss']
})
导出类CasesFormComponent实现OnInit{
@输入（）动作：动作；
@Output（）submitForm=neweventemitter（）；
表格：表格组；
方法=行动；
构造函数（私有fb:FormBuilder）{}
ngOnInit（）：void{
这个.createForm（）；
}
createForm（）：void{
this.form=this.fb.group({
grupos:[''，验证器。必需]，
名称：[''，验证器。必需]，
字段：[''，验证器。必填]
});
}
onSubmit（）：void{
if（this.form.valid）{
this.submitForm.emit（true）；
}
}
}

如何读取模板或表单ts中的属性？欢迎提供任何帮助或建议，谢谢

首先，错误说明了原因。您尚未定义grupos 变量，因此它将抛出错误

假设add-case.ts文件是可注入服务，您必须在CasesFormComponent中导入该服务，并且您可以在前端使用该服务，如：

<select formControlName="grupos">
    <option [value]="grupo" *ngFor="let grupo of addCaseService.grupos">
      {{ grupo.name }}
    </option>
</select>

{{grupo.name}

或者您可以使用组件中的方法从addCaseService获取grupos信息

---

如果有帮助，请告诉我。谢谢

您应该获得有关CasesFormComponent输入的grupos数据

@Input grupos :Grupos[] = [];

然后是HTML代码

<select formControlName="groups">
    <option [value]="grupo" *ngFor="let group of grupos">
      {{ grupo.name }}
    </option>
</select>

{{grupo.name}

您不能添加另一个@Input将数据传递到表单吗？此.form的值是多少？您可以从那里访问

grupos

属性。或者在您的

CasesFormComponent

中设置并填充

grupos

属性，假设add-case.ts是一项服务，那么您可以在组件中导入该属性，并在前端执行一些操作，list*ngFor=“let grupo of addCaseService.grupos”让我知道它是否有效。我会写详细的答案。