Angular 将 *ngFor 中的插值数据传回组件

Question

I am currently iterating over collection of Documents that belong to a parent (Policy). I need to get a specific property from the element to send to my back end for processing.

When I use the bound data in my HTML elements things work fine:

    <tbody>
       <tr *ngFor="let el of policy.documents">

          <td>{{el.year}}</td>
          <td>
             <a href="{{ el.url }}" target="_blank">{{ el.docType }}</a>
          </td>
       </tr>
    </tbody>

However when I try to pass one of the bound elements to a function (via button click) the data does not make it to my component.ts.

<tbody>
  <tr *ngFor="let el of policy.documents">

    <td>{{el.year}}</td>
    <td>
       <a href="{{ el.url }}" target="_blank">{{ el.docType }}</a>
    </td>
    <td>
        <button class="button btn btn-sm btn-primary" style="min-width: 150px;" 
        (click)="getDocuments(el.url)">View Document</button>
    </td>
  </tr>
</tbody>

component.ts

getDocuments(url){
    this.policyService.getAuthorizedHeader(url).subscribe((res) => {
      this.authHeader = res.toString();
      window.open(this.authUrl, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes')
    }, error => {
      this.alertify.error("Problem with your search: " + error.errors);
    });;
  }

Any Ideas?

Answer 1

In this case I found the the upstream provider changed the name of the property my model was storing (url to refUrl). Once i updated my models to capture the re-named property it worked as expected.

Lesson: Check the source of your data if things look right.