Save dice and then play in BD

Question

I have a code where I show the days of the week, so for each day of the week I have 3 shares: 1 - a select with options; 2 - a button that opens a modal to place an observation; 3 - an input attaching a pfd, PNG...

In this it increases with *ngFor, and after *ngFor I have a button to finish, where I must record all the data that the user put in the 3 actions for all days of the week.

The question is, how do I get this last 'finish' button to capture all this data? taking into account that I need to know the day that he placed the 3 shares.

HTML DO *NGFOR:

<div class="row hours_week" *ngFor="let DaysANDHours of DetailWeek">
  <div class="col-sm day">
    <p class="text-light">{{DaysANDHours.day}}:</p>
  </div>
  <!-- ! -->
  <div class="col-sm-lg">
    <p class="text-light">{{DaysANDHours.hours}} | <span class="text-danger">- {{DaysANDHours.less}}</span></p>
  </div>
  <!-- ! -->
  <!-- <div class="col">

  </div> -->
  <!-- ! -->
  <div class="col-sm">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
      </div>
      <select class="custom-select" id="inputGroupSelect01">
        <option selected>Motivo</option>
        <option value="1">Um</option>
        <option value="2">Dois</option>
        <option value="3">Três</option>
      </select>
    </div>
  </div>
  <!-- ! -->
  <div class="col-sm">
    <button class="btn btn-light but" data-toggle="modal"
      data-target="#ExemploModalCentralizado">Observação</button>
    <!-- Modal -->
    <div class="modal fade" id="ExemploModalCentralizado" tabindex="-1" role="dialog"
      aria-labelledby="TituloModalCentralizado" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="TituloModalCentralizado">Escreva aqui sua observação</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <textarea name="" id="obs" cols="60" rows="10" #titleInput></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal"
              (click)="SaveText(titleInput.value)">Salvar mudanças</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ! -->
  <div class="col-sm input-wrapper text-center">
    <label for='{{DaysANDHours.id}}'>
      Anexar
    </label>
    <input id='{{DaysANDHours.id}}' type='file' value='' (click)="getFile()" />
    <span id='{{DaysANDHours.id2}}' class="text-light"></span>
  </div>
  <br>
</div>

Then comes the button:

<button type="button" class="btn btn-primary button_salve btn-lg" (click)="finish()">Finalizar</button>

TS:

 daysAndHour() {

    this.detailService.DaysAndHoures()
      .subscribe(daysHours =>
        this.DetailWeek = daysHours,
        response => //HttpErrorReponse
          this.notificationService.notify(response.error.message))
  }

  getFile() {

    this.DetailWeek.forEach(e => {
      var $input = (<HTMLInputElement>document.getElementById(e.id)),
        $fileName = (<HTMLInputElement>document.getElementById(e.id2));

      $input.addEventListener('change', function () {

        $fileName.textContent = this.value;

      });
      this.file = $fileName.textContent
    });
  }

  SaveText(value) {
    this.obs = value;
    this.obss.push({
      observacoes: this.obs
    })
  }

  finish() {
    var dados = (<HTMLInputElement>document.getElementById('inputGroupSelect01')).value;
    console.log(dados);

  }

Could someone help me?

BS.: The days come from DB along with the hours.