Does not show data obtained by a web service in form, JavaScript, Angular 0X

Question

I tried many ways but it only shows me the item that I put on fire, and the rest don't. What am I wrong?

I am new at this. This is the request code:

HomeComponent

export class HomeComponent implements OnInit {
callPersonsPerfect$ = new Array<CallPerson>();
callPersons$ = new Array<CallPerson>();
constructor(public service: CallPersonsService, private router: Router, private route: ActivatedRoute) {
this.loadCategoryRanking(service);
loadCategoryRanking(service: CallPersonsService) {
    service.getCallPersons().forEach(
        CallPerson => {
            console.log(CallPerson);
            this.callPersonsPerfect$.push(CallPerson);

CallPersonsService

    export class CallPersonsService {
  public callPersons$ = [{
    CallPersonRank: 0,
    CallPersonID: 100,
    CallPersonName: '',
  }];
 (ONLY SHOW THIS ON THE WEB)

  public getCallPersons() {
    fetch(basewsRankingCallWS + '?' + "Usuario=" + baseUser + "&Password=" + basePass, {
      method: 'POST',
    })
      .then(response => response.json())
      .then(data => {
        const { RankingCallSDT } = data;
        RankingCallSDT.map(item => {
          const { RankingCallCodigoVendedoras,
            RankingCallNombre } = item;
          var array = [{
            CallPersonRank: 0,
            CallPersonID: RankingCallCodigoVendedoras,
            CallPersonName: RankingCallNombre,
          }]
          this.callPersons$ = this.callPersons$.concat(array);
          console.log(this.callPersons$);
        })
      })
      .catch(e => console.log(e))

    return this.callPersons$;
  }

Thanks