Question

我正在尝试创建一个表。每个奇数行都有数据，每个偶数行都是可扩展的行。当用户按下展开图标时，我需要动态地将数据加载到可扩展行。

我无法找到使用ComponentResolver的方法，局部变量在循环内无用。是否有另一种角度方式，除了使用ElementRef解决方法？

<template ngFor let-row="$implicit" [ngForOf]="rows" let-i="index">
        <tr class="row-rule-review ">
            <td class="col-applications">
            <img class="stack-img" src="images/expand.png" (click)="toggleButton(i)">

        </td>
             ...
        </tr>
        <tr class="row-extended">
            <td colspan="8">
                <div #target class="extended-content" id="extended-content-{{i}}" [style.height.px]="isExpand[i] ? 150 : 0">
                </div>
            </td>
        </tr>        
    </template>

组件上的函数：

toggleButton(index, cmp) {
        let that = this;
        if (this.isExpand[index]) {
            this.isExpand[index] = false;
        }
        else {
            if (this.extendComponent[index] === undefined) {
                this.resolver.resolveComponent(RowExpand).then((factory: ComponentFactory<any>) => {
                    that.extendComponent[index] = cmp.createComponent(factory);
                });
            }
            that.isExpand[index] = true;
        }
    }

在这个句子里，cmp.createComponent是未定义的

Answer 1

您可以使用我在Angular 2 dynamic tabs with user-click chosen components中解释的包装器，如：

<!DOCTYPE html>

Answer 2

     <tbody>
       <tr ng-repeat="dep in vm.department" >
         <td ng-if="!dep.show">
           <label class="checkbox checkbox-inline">
             <input type="checkbox" ng-model="dep.selected" ng-change="oneCheckboxSelected(dep)">
             <i class="input-helper"></i>
           </label>
         </td> 
         <td class="col-xs-2" ng-class="{'':dep.show == false , 'bg-white-row b-t-b-blue':dep.show == true}">
           <div class="col-lg-12  col-md-12 col-sm-12 col-xs-12 text-right" ng-class="{'':dep.show == false , 'bg-edecec-row-div':dep.show == true}">
             <a href="" ng-click="vm.getdepDetails(dep)"> 
               <i ng-if="!dep.show" class="glyphicon glyphicon-plus fa-3x font-BB"></i>
               <i ng-if="dep.show" class="glyphicon glyphicon-minus fa-3x blue-font"></i>
             </a>
           </div>
         </td>
       </tr>
     </tbody>

在on标签vm.getdepDetails（dep）上编写onclick，在控制器中你可以编写函数并传递参数

angular 2 @viewChild在一个循环中

2 个答案: