Angular 8 形式数组

Question

我收到错误ERROR TypeError: "this.eventData.map is not a function" 使用表单数组时。我不知道如何解决这个错误。这是您参考的我的代码。我不知道如何解决这个错误。这是您参考的我的代码。我不知道如何解决这个错误。这是您参考的我的代码

html

<div class="card col-8 shadow-sm">
    <div class="list-group">
        <form name="form" [formGroup]="form" (ngSubmit)="form.valid && onSubmit()">
        <div class="list-group-item flex-column align-items-start" *ngFor="let list of eventData?.events; list as index; let i of index">
            <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                <span class="d-flex align-items-center">
                <h5 class="card-title pr-3 d-inline-block font-weight-bold">{{list.eventName}}</h5>
                <span class="border border-danger d-flex align-self-center pl-2 pr-2 text-danger">{{list.seats}} space left</span>
            </span>
                <span class="btn btn-primary btg" (click)="lightbox.open(0, 'lightbox',test)"><i class="fa fa-image pr-2"></i>Gallery</span>
            </div>
                <p class="card-text">
                    {{list.eventNote}}
                </p>
                <div>
                    <span class="font-weight-bold pr-2">Attendings :</span>
                    <span  class="ml-5">
                    <mat-radio-group [formControl]="myFormArray.at(i).get('attendings')"  aria-label="Select an option">
                        <mat-radio-button value="y">Yes</mat-radio-button>
                        <mat-radio-button value="n">No</mat-radio-button>
                      </mat-radio-group>
                    </span>
                </div>
                <div class="w-60 mt-4">
                    <div class="card  card-line col-md-12 mb-3" *ngFor="let fee of list.feeList; let i = index">
                         <div  class="card-body ctrl-height">
                         <input type="radio" [formControl]="myFormArray.at(i).get('confee')" id="{{fee.feeId}}" [value]="fee">
                         <label for="{{fee.feeId}}">
                          <span class="id-conf">{{fee.category}} {{i}}</span>
                          <span class="price">{{fee.price}}</span>
                        </label>
                        </div> 
                     </div>
                 </div>
            </div>
        </div>
    </form>
     </div>
     <div class="card-footer no-gutters ctrl-lr">
        <div class="card-body float-right"> 
            {{form.value | json}}
            <a (click)="" class="btn btn-primary  card-link d-inline pl-4 pr-4">Submit </a>

        </div>
      </div>
  </div>

这是组件部分

组件

    form = this.fb.group({
    attendings: new FormControl,
    confee: new FormControl

   });     

        ngOnInit() {
              this.getPackage(id);
            }

              getEvent(id){
        let t = 1;
        this.httpService.getConferenceEvent(t).subscribe(res =>{
            this.eventData = res;
            this.feeListData = res['feeList'];
            console.log(this.eventData);
            this.assignControls()
        })
      }


      assignControls(): void {
        this.controls = this.eventData.map(pack => {
            return new FormGroup({
                attendings: new FormControl(),
                fee: new FormControl()
            });
       })

       this.form = new FormGroup({
           formArray: new FormArray(this.eventData)
       });
    }

希望大家帮忙 提前致谢

Answer 1

TypeError: Cannot read property 'map' of undefined 表示在制作地图时 this.eventData 未定义。首先，您正在调用您的服务，但您正在将您的控制权分配给尚未初始化的东西，这就是它不起作用的原因。

    ngOnInit() {
      this.getPackage(id);
    }

    getPackage(id){
        this.httpService.getPackageEvent(id).subscribe(res =>{
            this.eventData = res;
            this.assignControls()
        })
    }

    assignControls(): void {
        this.controls = this.eventData.map(pack => {
            return new FormGroup({
                attendings: new FormControl(),
                fee: new FormControl()
            });
       }
       this.form = new FormGroup({
           formArray: new FormArray(this.eventData)
       });
  });

使用该代码，当 eventData 存在时，至少会分配控件。除非您的服务返回未定义或不是数组的内容，否则该错误应该会消失。

为了清楚起见，当您订阅某些内容时，您正在执行异步操作，这意味着代码顺序没有任何意义。您要么必须从订阅内部调用函数，要么使用 await 使调用同步（不要这样做，因为它会冻结应用程序，这很糟糕）