Type promise<object> is missing the following properties from type<object> Angular-CodePudding

I can't get my head around the following:

I have this class:

export class PatientOverviewColumnConfig {
  public Id!:number;
  public ColumnField!:string
  public Priority!:number;
  public UserId!:number;
  public IsHidden!:boolean;
}

And the this one as well:

export class UserClientConfiguration {
  public patientOverviewColumnConfig: PatientOverviewColumnConfig[];

  constructor(){
     this.patientOverviewColumnConfig = [];
  }
}

I have a service that is to retrieve the data from a sql server:

export class ClientconfigurationService {
      static instance : ClientconfigurationService;
      apiUrl?:string;
      public patientOverViewColumns:PatientOverviewColumnConfig[]
      public columns!:PatientOverviewColumnConfig[]
    
    
 constructor(appConfig:AppConfigService,private http: HttpClient) {
    if(!ClientconfigurationService.instance){
    ClientconfigurationService.instance = this;
    }
   this.apiUrl = appConfig.data.API_URL;
   this.patientOverViewColumns = this.getColumns();
   return ClientconfigurationService.instance;
}

async getColumns():Promise<PatientOverviewColumnConfig[]>{
  const url = this.apiUrl '/ColumnConfig/GetColumnConfiguration'
  const response = this.http.get<PatientOverviewColumnConfig[]>(url)
  this.columns = await lastValueFrom(response);
  return this.columns;
  
}
}

I get the following error: Type 'Promise<PatientOverviewColumnConfig[]>' is missing the following properties from type 'PatientOverviewColumnConfig[]': length, pop, push, concat, and 28 more.

What am I missing? Should I modify the this.columns as it is a promise?

CodePudding user response：

You can't assign an asynchronous return value directly.

Change this line:

this.patientOverViewColumns = this.getColumns();

this.getColumns().then(result => this.patientOverViewColumns = result);