Angular 2 join the array of objects using object's name

In my backend, I will return following response:

[
      {
      "id": 1,
      "restaurant_name": "Ajisen Ramen Toronto",
      "description": "Japanese Restaurant",
      "phone": "416-977-8080",
      "address":       {
         "id": 3,
         "address": "332 Spadina Ave",
         "postalCode": "M5T 2G2",
         "latitude": 43.65406,
         "longitude": -79.3989,
         "city": {"city_name": "Toronto"}
      },
      "category":       [
                  {
            "id": 1,
            "categoryName": "Asian"
         },
                  {
            "id": 2,
            "categoryName": "Japanese"
         }
      ]
   }
]

Now in my angular 2 front end, I can successfully access the id, restaurant_name, address, but not the category by following code in

restaurant.component.html

<h3 style="color:green">Restaurant List:</h3>
<a *ngFor="let rest of restaurants" class="col-1-4">
  <div>
    <h4>Id: {{rest.id}} - Name: {{rest.restaurant_name}} - Category: {{ rest.category }} - Address: {{rest.address.address}},
      {{rest.address.city.city_name}}</h4>
  </div>
</a>

I want my Category part display like 'Category: Asian, Japanese', How can I do that?

Here is the restaurant.ts class

import { Address } from './address';
import { Category } from '../category';

export class Restaurant {
 categoryNames : string;
  constructor(public id: number,
    public restaurant_name: String,
    public description: String,
    public phone: String,
    public address: Address,
    public category: Category[]) {
      this.categoryNames = this.category.map(c => c.categoryName).join(',');
  };
}

I try access categoryNames in restaurant.component.html, but it didn't return any information to me.

Here is the category.ts

export class Category {
  constructor(public id: number,
              public categoryName: String) {
  }
}

For the rest of the code please refer to https://github.com/zhengye1/Eatr/tree/dev