angular 2 @viewChild in einer Schleife

Ich versuche, eine Tabelle zu erstellen. Jede ungerade Reihe hat Daten und jede gerade Reihe ist eine ausdehnbare Reihe. Ich muss die Daten dynamisch in die erweiterbare Zeile laden, wenn der Benutzer das Erweiterungssymbol drückt.angular 2 @viewChild in einer Schleife

Ich kann nicht den Weg finden, es mit ComponentResolver zu tun, lokale Variable ist nutzlos innerhalb einer Schleife. Gibt es einen anderen eckigen Weg, außer die Problemumgehung von ElementRef zu verwenden?

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

die Funktion auf der Komponente mit:

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

in diesem senario ist cmp.createComponent undefinierte

Quelle

2016-06-06 Avi

Wo ist das Symbol, auf das der Benutzer klickt? Warum denkst du "lokale Variable ist nutzlos"? Was meinst du mit "lokale Variable" - "Template-Variable"? Kannst du bitte etwas genauer ausarbeiten, was genau bei welcher Aktion passieren soll? –

das Symbol ist innerhalb der ersten in einer der . Lokale Variable = # Ziel – Avi

Haben Sie versucht '(click) =" doSomething (i, Ziel) "'? –

Sie können den Wrapper ich erkläre in Angular 2 dynamic tabs with user-click chosen components like:

<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"> 
       <dcl-wrapper type="expandedComponent" *ngIf="isExpand[i]></dcl-wrapper> 
      </div> 
     </td> 
    </tr>   
</template>

Quelle

2016-06-06 08:21:19

-1

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

schreiben Beim Klicken auf dem Tag vm.getdepDetails (DEP) und im Controller können Sie die Funktion schreiben und die Parameter übergeben

Quelle

2016-06-06 08:03:31

'ng-click' sieht nicht wie Angular2 aus –

angular 2 @viewChild in einer Schleife

Antwort

Verwandte Themen