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

Question

我目前正在迭代属于父项（策略）的文档集合。我需要从元素中获取特定的属性以发送到我的后端进行处理。

当我在 HTML 元素中使用绑定数据时，一切正常：

    <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>

然而，当我尝试将绑定元素之一传递给函数（通过单击按钮）时，数据没有进入我的 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);
    });;
  }

有什么想法吗？

Answer 1

在这种情况下，我发现上游提供商更改了我的模型存储的属性的名称（url 到 refUrl）。一旦我更新了我的模型以捕获重新命名的属性，它就按预期工作了。

教训：如果一切正常，请检查您的数据来源。

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

Angular Pass Interpolated Data within an *ngFor back to component

string-interpolation

ngfor

angular

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

Angular Pass Interpolated Data within an *ngFor back to component

string-interpolation

ngfor

angular

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