相关疑难解决方法(0)

ng2:如何在ngFor循环中创建变量

我试图找出如何在ngFor循环中创建变量.

我有一个像这样的循环:

<td *ngFor="#prod of products">
  <a href="{{getBuild(branch,prod)?.url}}">
    {{getBuild(branch,prod)?.status}}
   </a>
</td>
Run Code Online (Sandbox Code Playgroud)

您可以看到"getBuild"调用必须多次重复.(在我的实际例子中多次).我想在循环中一次在模板中创建这个变量并简单地重用它.有没有办法做到这一点?

ngfor angular

35
推荐指数
4
解决办法
5万
查看次数

在Angular2中使用ComponentResolver和ngFor创建动态anchorName/Components

我需要在ngFor循环中创建唯一的锚点名称/组件,以将其与ComponentResolver.resolveComponent一起使用.

<div>
  <table>
    <tr *ng-for="#vIndex of vArr">
      <td *ng-for="#hIndex of hArr">
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
    </tr>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

生成的HTML应该看起来像这样:

<div>
  <table>
    <tr>
      <td>
        <div #uniqueanchorname0_0></div>
      </td>
      <td>
        <div #uniqueanchorname0_1></div>
      </td>
    </tr>
    <tr>
      <td>
        <div #uniqueanchorname1_0></div>
      </td>
      <td>
        <div #uniqueanchorname1_1></div>
      </td>
      <td>
        <div #uniqueanchorname1_2></div>
      </td>
    </tr>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

有了它,我可以使用DynamicComponentLoader,如:

loader.loadIntoLocation(responseDependentComponent, elementRef, 'uniqueAnchorName1_2');
Run Code Online (Sandbox Code Playgroud)

生成的HTML不会被替换,看起来像:

<div>
  <table>
    <tr>
      <td>
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
      <td>
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
    </tr>
    <tr>
      <td>
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
      <td>
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
      <td>
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
    </tr>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

如果无法创建唯一的锚名称.还有其他方法可以将组件加载到特定位置吗?

angular

8
推荐指数
1
解决办法
1万
查看次数

Angular5 需要功能来检查/取消选中 mat-table 内的 mat-checkbox

我可以在表格中获取复选框以在选中/取消选中时发出更改,但是在单击地图图钉以切换复选框状态时遇到问题。

我的带地图的桌子

这是我的表:

      <mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="number">
          <mat-header-cell *matHeaderCellDef> Number </mat-header-cell>
          <mat-cell *matCellDef="let stock">
            // #myCheckbox needs to be unique
            <mat-checkbox #myCheckbox [checked] (change)="selectStock(stock, $event)"></mat-checkbox> <a href="">{{ stock.number }}</a>
          </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickRow(row._id,$event)"></mat-row>
      </mat-table> 
Run Code Online (Sandbox Code Playgroud)

然后从我的地图上,当你点击一个大头针时,运行一些功能

  (click)="someFunction(myCheckbox)"
Run Code Online (Sandbox Code Playgroud)

在我的班级

    @ViewChild('myCheckbox') private myCheckbox: MatCheckbox;

    someFunction(myCheckbox){
         if (stock.isChecked) {
            this.myCheckbox.checked = false;
            } else {
            this.myCheckbox.checked = true;
         }
    }        
Run Code Online (Sandbox Code Playgroud)

这是我正在处理的示例,但它对每个复选框应用了相同的 #id,因此只有第一个复选框被切换(我假设每个复选框都需要唯一的唯一 ID?)

local-variables ngfor angular angular5

2
推荐指数
1
解决办法
1万
查看次数

标签 统计

angular ×3

ngfor ×2

angular5 ×1

local-variables ×1