How to load different entities in one Restapi request in Angular?

Question

Angular

I understand with angular, in different lessons and office. documentation, but stuck with loading data from RESTAPI.
There is data, comment.ts :

export class comment {
    id: number;
    text: string;
    author_id: number;
    date_at: string;
    author: Author;
}

and author.ts :

export class Author {
    id: number;
    name: string;
}

Wrote a service for loading comments comment.service.ts :

getComments(limit, offset): Observable<Feed[]> {
    const url = `${this.url}?limit=${limit}&offset=${offset}`;
    return this.http.get<Comment[]>(url);
  }

And in the component itself I load:

comments: Comment[] = [];
...
    ngOnInit() {
        this.commentService.getData(10, 0).subscribe((loadedData: Comment[]) => this.comment = loadedData);
    }

and in the warm weather I display it using *ngFor="let comment of comments" .
The question is, how can I display in the template: {{comment.author.name}} ?
At what stage and in what place should authors be loaded by id and the comment array completed? I’ve been googling for a day, but everywhere the lessons are simple, and the closest example is when the api also returns the author’s structure in one request, but I want these requests to be different: one is a list of comments, and the second is loading a specific author. The service for obtaining the author wrote, but how to tie it and where is the problem.