typecript不能保证我要访问的控件是类型的formgroup或我的角模板中的formarray。如何改变它？

Question

我的组件：

export class CreateCourseComponent implements OnInit{
  ngOnInit(): void {
    this.addModule()
  }
  
  courseService = inject(CourseService)

  options = this.courseService.options;
  // Create a new form group for the course
  newCourseForm = new FormGroup({
    name: new FormControl(""),
    imgUrl: new FormControl(""),
    modules: new FormArray([])      

  });

  addModule() {
    const moduleFormGroup = new FormGroup({
      title: new FormControl(""),
      link: new FormControl(""),
      contentType: new FormControl(this.options[0]), // Default to "Questions"
      content: new FormArray([]), 
      parts: new FormArray([])
    });
    (this.newCourseForm.get('modules') as FormArray).push(moduleFormGroup);
    this.onContentTypeChange(moduleFormGroup)
  }

  addQuestion(moduleFormGroup: any) {
    const partsArray = moduleFormGroup.get('parts') as FormArray;
    partsArray.push(new FormGroup({
      question: new FormControl(""),
      response: new FormControl(""),
    }))
  }

  onContentTypeChange(module: FormGroup | any) {
    if (!module) {
        return; 
    }

    const contentType = module.get('contentType')?.value;
    const contentArray = module.get('content') as FormArray;

    // Clear previous questions if the content type changes
    contentArray.clear();

    if (contentType === 'Questions') {
      module.removeControl('content'); // Remove the old content FormArray

      const partsArray = new FormArray([]);
      module.addControl('parts', partsArray);
      this.addQuestion(module);
    }
  }

  // Method to submit the form
  onSubmit() {
    console.log(this.newCourseForm.value)
    if (this.newCourseForm.valid) {
      const courseData = this.newCourseForm.value;
      console.log(courseData)
      // Call the API to create a new course
      this.courseService.createCourse(courseData).subscribe({
        next: (response: any) => {
          // Handle successful response
          console.log('Course created successfully:', response);
        },
        error: (error: any) => {
          // Handle error
          console.error('Error creating course:', error);
        }
      });
    } else {
      console.error('Form is invalid');
    }
  }


  get modules(): FormArray {
    return this.newCourseForm.get('modules') as FormArray; 
  }

}

我试图使用“ AS”关键字来更改模板内部的主张，但似乎Angular不允许这样做。 $任何hack均行不通

看：

<div formArrayName="modules">
    @for(module of (modules as FormArray).controls; track $index){
        <div class="py-2 my-3 d-flex flex-column align-items-center justify-content-center" [formGroupName]="$index">
            <mat-accordion>
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            <h3>Module {{ module.get('title')?.value || ($index + 1) }}</h3>
                        </mat-panel-title>
                    </mat-expansion-panel-header>

                    <mat-form-field appearance="outline" class="m-1">
                        <mat-label for="title">Titre du module:</mat-label>
                        <input matInput formControlName="title" required>
                    </mat-form-field>

                    <mat-form-field appearance="outline" class="m-1">
                        <mat-label for="link">Lien du module:</mat-label>
                        <input matInput formControlName="link" required>
                    </mat-form-field>

                    <mat-form-field appearance="outline" class="m-1">
                        <mat-label for="contentType">Type de contenu:</mat-label>
                        <mat-select formControlName="contentType" (selectionChange)="onContentTypeChange(module)" required>
                            @for(option of options; track $index){
                                <mat-option value="{{option}}">{{option}}</mat-option>
                            }
                        </mat-select>
                    </mat-form-field>

                    @if(module.get('contentType')?.value == "Questions"){
                        <div class="field" formArrayName="parts">
                            @for(question of module.get('parts')?.controls; track $index){
                                <div formGroupName="$index">
                                    <mat-form-field appearance="outline" class="m-1">
                                        <mat-label>Question:</mat-label>
                                        <input matInput formControlName="question" required>
                                    </mat-form-field>
                                    <mat-form-field appearance="outline" class="m-1">
                                        <mat-label>Réponse:</mat-label>
                                        <input matInput formControlName="response" required>
                                    </mat-form-field>
                                </div>
                            }
                            <button mat-button (click)="addQuestion(module)">Ajouter une question</button>
                        </div>
                    }

                    <mat-form-field appearance="outline" class="m-1">
                        <mat-label for="content">Content:</mat-label>
                        <textarea matInput formControlName="content" required></textarea>
                    </mat-form-field>
                </mat-expansion-panel>
            </mat-accordion>
        </div>
    }
</div>

您可以使用普通功能编写相同的功能，该功能施放传递的控件以下内容：

convertToFormArray(control) {
  return control as FormArray;
}

convertToFormGroup(control) {
  return control as FormGroup;
}