angular 6 vIew update

there is such a code

userData (id) { VK_API.Api.call('users.get', { user_ids: id, v:"5.73", fields: 'online,photo_200' }, (data) => { this.currentUser = data.response[0]; VK_API.Api.call('friends.search', { user_id: id, count: 5, fields: 'photo_100,online', v:"5.73" }, (friends) => { this.currentUser.friends = friends.response.items; console.log(this.currentUser); }); }); } 

He works out normally. in the console displays tedious data.

Why the component is not updated to display data

here is the markup

 <div class="header"> <div class="user-logo" *ngIf="currentUser"> <img class="user-avatar" [src]="currentUser.photo_200"/> </div> <span>{{ currentUser?.first_name }}</span> </div> <div *ngFor="let friend of currentUser.friends | async"> <span>{{ friend.online }}</span> </div> 

if you remove the pipe async and operator? the error that the properties are undefined / But still there is no data update. VK_API This global variable window will be exported from a file.

 export const VK_API = window.VK; 

the script itself with vk_api connects to index.html;

 <script src="https://vk.com/js/api/openapi.js"></script>