Угловая привязка данных Частная собственность объекта

Question

Этот класс имеет приватные свойства и геттер сеттер методы.

Season.ts:

export class Season {

  private _seasonId: number;
  private _name: string;  

  get seasonId(): number {
    return this._seasonId;
  }

  set seasonId(value: number) {
    this._seasonId = value;
  }

  get name(): string {
    return this._name;
  }

  set name(value: string) {
    this._name = value;
  }

}

И у меня есть компонент, чтобы показать это:

@Component({
  selector: 'app-season',
  templateUrl: './season.component.html',
  styleUrls: ['./season.component.css']
})
export class SeasonComponent implements OnInit {


  season: Season = new Season();
  seasons: Season[] = [];

 //....

 // There is some stuff to fill 'seasons' array 
  private addSeason(seasonForm: NgForm) {
    if (!this.isUpdateMode) {
      this.addNewMemberToSeasons();
    } else {
      this.editSeasonsMember();
    }
    this.seasonsChange.emit(this.seasons.slice());
    this.resetSeasonForm(seasonForm);
  }

  private editSeasonsMember() {
    const editIndex = this.seasons.findIndex((s) => s.seasonId === this.season.seasonId);
    this.seasons[editIndex] = Object.assign({}, this.season);
  }

  private addNewMemberToSeasons() {
    const clone = Object.assign({}, this.season);
    this.seasons.push(clone);
  }
 // ...

HTML

<li class="list-group-item ..." *ngFor="let season of seasons">
    <div>
      <h6 class="my-0">{{season.name}}</h6>
    </div>
    <span>
            <span class="btn-group-sm" role="group">
              <button type="button" class="btn-sm btn-outline-warning"
                      (click)="editSeason(season.name)">Edit</button>
              <button type="button" class="btn-sm btn-outline-danger"
                      (click)="deleteSeason(season.name)">Delete</button>
            </span>
          </span>
  </li>

После добавления нового сезона в массив сезонов я вижу новый blank list-group-item с кнопками в моем шаблоне. Но о сезоне нет 1024 *. И консоль понятна. Если я использую привязку интерполяции следующим образом: {{season._name}}, она работает, и я вижу свойство name в моем шаблоне. Но на этот раз WebStorm предупреждает меня:

ng: Identifier '_name' refers to a private member of 'Season'

Как отобразить объект, имеющий частные свойства, с привязкой интерполяции?

Я использую Angular 6.

Вот демоверсия .

---

Извините, я не добавил некоторые важные методы Component для удобства чтения. Я обновил вопрос методами. Собственно, проблема была там:

const clone = Object.assign({}, this.season);
this.seasons.push(clone);

Спасибо пользователю 184994.