Angular 在*ngFor中传递插值数据回组件。

Question

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

当我在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>

组件.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）。 一旦我更新了我的模型以捕获重新命名的属性，它就像预期的那样工作了。

教训:如果事情看起来是正确的，请检查你的数据来源。