角度7-錯誤錯誤：未捕獲（承諾）：TypeError：無法讀取未定義的屬性“ map”

Question

我對angular不熟悉，我試圖創建帶有多個復選框的新表單屏幕，我具有“角色”和“權限”的主表，並且在創建新角色時，用戶必須選擇權限

我為新角色屏幕創建了一個新表單，還創建了權限服務，但是當使用map來創建表單數組時，出現上述錯誤

import { FormBuilder, FormArray } from '@angular/forms';
import { Injectable, ɵConsole } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Role } from '../model/role.model';
import { Permission } from '../model/permission.model';
import { Observable} from 'rxjs';
import { NewroleComponent } from '../Components/newrole/newrole.component';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

import { FormGroup, FormControl, Validators } from '@angular/forms';
import { PermissionService } from './permission.service';


@Injectable({
  providedIn: 'root'
})
export class RoleService {
  private serviceUrl = 'https://adminfinal2.herokuapp.com/rolesonhp';
  httpOptions = { headers: new HttpHeaders({'Content-Type': 'application/json'})};
  permissions;

  constructor(private http: HttpClient, private permissionService: PermissionService, private formBuilder: FormBuilder  ) { 
    this.permissionService.getPermission().subscribe(results => {
      if (!results) {
        return;
      }
      console.log(results);
      //this.permissions = new FormArray(results);
      console.log(this.permissions);
    });
    const controls = this.permissions.map(c => new FormControl(false));
    controls[0].setValue(true); // Set the first checkbox to true (checked)

    this.form = this.formBuilder.group({
      permissions: new FormArray(controls)
    });
  }

  form: FormGroup = new FormGroup({
    $key: new FormControl(null),
    roleName: new FormControl('', Validators.required),
    description: new FormControl('',Validators.required),
    // permissions: new FormArray([ new FormControl(false)])
  });


  initializeFormGroup() {



    this.form.setValue({
      $key: null,
      roleName: '',
      description: '',
      controls:''
    });

  }
  populateForm(role) {
    // console.log('in service: ' + user.userName_gmail);
    this.form.setValue({
      $key: role.roleId,
      roleName: role.name,
      description: role.description,

    });
  }
  getRole(): Observable<Role[]> {
    return this.http.get<Role[]>(this.serviceUrl);
   }

   addRole(role): Observable<Role> {
    return this.http.post<Role>(this.serviceUrl, role, this.httpOptions);
   }
}

當打印結果時（console.log（results）;），我確實在控制台中看到了這些值。

Answer 1

我懷疑在解析API之前，您的權限是不確定的，因此會出現錯誤並正在執行console.log，因為它在訂閱中並且在解析API之后得到執行。將權限放入訂閱中。

constructor(private http: HttpClient, private permissionService: PermissionService, private formBuilder: FormBuilder  ) { 
this.permissionService.getPermission().subscribe(results => {
  if (!results) {
    return;
  }
  console.log(results);
  //this.permissions = new FormArray(results);
  console.log(this.permissions);
   const controls = this.permissions.map(c => new FormControl(false));
controls[0].setValue(true); // Set the first checkbox to true (checked)

this.form = this.formBuilder.group({
  permissions: new FormArray(controls)
});
});
}