Problema com renderização de *ngFor em caso particular

Iniciei um projeto novo com o intuito de estudar. Trata-se de um aplicativo onde você cadastra treinos de natação. Os treinos contém séries então criei a seguinte estrutura:

SerieComponent: Contem apenas uma série do treino.

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'serie',
  templateUrl: './serie.component.html',
  styleUrls: ['./serie.component.css']
})
export class SerieComponent implements OnInit {

  @Input()
  metragem: number;
  @Input()
  repeticoes: number;
  @Input()
  descritivo: string;

  ngOnInit() {
  }

}

TreinoComponent: contem a descrição do treino, um array de séries, e a metragem total do treino

import { SerieComponent } from './../serie/serie.component';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'treino',
  templateUrl: './treino.component.html',
  styleUrls: ['./treino.component.css']
})
export class TreinoComponent implements OnInit {

  //Tera um array de série component
  //Percorrera esse array para exibir na planilha os dados.

  @Input()
  tipoTreino: string;
  @Input()
  metragemTotal: number = 0;
  series: SerieComponent[] = [];

  ngOnInit() {
  }
}

CadastroTreinoComponent: Responsável apenas pelo cadastro do treino

import { TreinoComponent } from './../treino/treino.component';
import { SerieComponent } from './../serie/serie.component';
import { Component, OnInit } from '@angular/core';

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

  serie: SerieComponent = new SerieComponent();
  treino: TreinoComponent = new TreinoComponent();;


  constructor() {

  }

  ngOnInit() {
  }

  adicionaSerie() {

    var reps = this.serie.repeticoes;
    var metragem = this.serie.metragem;
    this.treino.metragemTotal += (reps * metragem);
    this.treino.series.push(this.serie);
    this.serie = new SerieComponent();
  }

  cadastraTreino(event) {
    event.preventDefault();

  }
}

O template de cadastro: Não estou preocupado aqui com formatação Mas a idéia é que ele funcione "mais ou menos" como o cadastro de foto.

Coloco as informações na coluna da esquerda e as informações aparecem na coluna da direita.

<div class="container">
     <div class="col-md-6">
        <div class="form-group">  
          <label>Tipo de treino</label>
          <input type="text" (keyup)="0"  name="tipotreino" [(ngModel)]="treino.tipoTreino"  class="form-control"  autocomplete="off">   
        </div>

          <div class="row row-list">
            <label>Reps</label>
            <input type="number"  name="repeticoes" [(ngModel)]="serie.repeticoes"  class="form-control"  autocomplete="off">   
            <label>Metragem</label>
            <input type="number"  name="metragem" [(ngModel)]="serie.metragem"  class="form-control"  autocomplete="off">   
            <label>Descritivo</label>
            <input type="text"  name="descritivo" [(ngModel)]="serie.descritivo"  class="form-control"  autocomplete="off">   
        </div>
        <button type="button" class="btn btn-secondary" (click)="adicionaSerie()">adicionar</button>
     </div>
     <div class="col-md-6">
       <form (submit)="cadastraTreino($event)" class="row center-text">
          <treino tipoTreino={{treino.tipoTreino}}  metragemTotal={{treino.metragemTotal}}></treino>
          <button type="submit" class="btn btn-primary">Salvar</button>
      </form>
     </div>

</div>

Template do componente Treino:

<div>
  <div>
   Tipo de treino: {{tipoTreino}}
  </div>  
  <div>
        <serie *ngFor="let serie of series" repeticoes={{serie.repeticoes}} metragem="{{serie.metragem}}" descritivo="{{serie.descritivo }}"></serie>
  </div>
  <div>
    Total: {{metragemTotal}}
  </div>  
</div>

Template do SerieComponent:

<div class="row row-list">
  <div class="col-xs-2">
     {{repeticoes}}X
  </div>
  <div class="col-xs-2">
     {{metragem}}m
  </div>
  <div class="col-xs-8">
     {{descritivo}}
  </div>
</div>

No CadastroComponent, ao preencher os dados e clicar em salvar, eu chamo o metodo adicionaSerie(), que acessa o array de Series que está dentro de TreinoComponent e adiciona um item a ele. Pelo console, tudo é feito perfeitamente, os dados são adicionados corretamente. No html, é exibido o tipo de treino (que é preenchido no mesmo momento em que se digita) e o cálculo da metragem total também. Mas, o array de series não é renderizado. Alguma solução?

Obrigado