How to Connect angular with .net core API and get response in Array

 Here is the example of ts file where service is calling and hold in Array list.

import { Component } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable, map } from 'rxjs';

@Component({

  selector: 'app-login',

  templateUrl: './login.component.html',

  styleUrls: ['./login.component.css']

})

export class LoginComponent {

  baseURL: string = "https://localhost:44363/";

  Model: any;

  ArrayList : any;

 

  constructor(private http: HttpClient) {

  }

  onSave(){

    //alert("adasd");

    const headers = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': "POST", 'Access-Control-Allow-Headers': "accept, content-type"}  

    const body="";

    console.log(body)

//  this.http.get(this.baseURL + 'api/Values', {responseType: 'text'}).subscribe(payload =>

//   this.ArrayList = payload);

    //payload => console.log(payload)

    this.http

        .get('https://jsonplaceholder.typicode.com/users')

        .subscribe(payload => {

          this.ArrayList = payload

          console.log(this.ArrayList);

         

        }

          );

           

//     var Result = Req.subscribe();

//  //   console.log()

  }

}

Here is HTML angular page code

<p>Hi Test abc</p>

<button (click)="onSave()">Save</button>

{{ArrayList}}

<div *ngFor="let item of ArrayList; let index=index">

    <div class="col">

        {{item.id}},{{item.name}},{{item.address.street}}

      </div>

      <div class="col">

        {{item[index+1]}}

      </div>

</div>