Call a function inside an array

I have a function, which through an api, I bring the data and place it in an array.

self.PrestamosXUsuario = function () {
       fetch(environment.apiPoint + '/prestamos?empresa=' + empresa + '&anexo=' + anexo, {
       method: 'GET',
       headers: {
           'Content-Type': 'application/json'
          }
       })
       .then(res => res.json())
       .then(datos => {
            datos.forEach(e => {
                  self.arrayPrestamos.push({
                    observacion: e.observacion,
                    monto: e.monto,
                    desctTotal: e.desctTotal
                  })
                })                   
            })
            self.openModalPrestamos();
        }

But when I add another td with an image so that when I click it, a modal opens with the details of that data, I get an error.

<thead class="thead-dark">
  <tr style="text-align: center;">
    <th scope="col">PRÉSTAMO</th>
    <th scope="col">TOTAL</th>
    <th scope="col">SALDO</th>
  </tr>
</thead>
<tbody data-bind="foreach: arrayPrestamos">
  <tr>
    <td style="text-align: center;" data-bind="text: observacion"></td>
    <td style="text-align: right;" data-bind="text: monto"></td>
    <td style="text-align: right;" data-bind="text: desctTotal"></td>
    <td><img id="details" class="details" src="../../img/details.png" height="30px" 
         data-bind="click: DetallePrestamos"></td>
  </tr>
</tbody>

The error message is as follows

Uncaught (in promise) ReferenceError: Unable to process binding "click: function(){return DetallePrestamos }"
Message: DetallePrestamos is not defined

What I hope is that when clicking on that image that is in the table, another modal will open with the details of each data.