在ngFor中加载最后一项后调用指令-Java 学习之路

我有一个包含表的组件，我在tBody内的一行上调用ngFor，问题是我需要在加载ngFor的最后一个元素后运行Table上的指令 .

这是我的组件

import {Component} from 'angular2/core';
import {InfScrollTableService} from './inf-scroll-table.service'
import {HTTP_PROVIDERS} from 'angular2/http';
import {InfScrollTableDirective} from './inf-scroll-table.directive'
@Component({
  selector: 'my-app',
  template: `
   <table class="scrollable" infScrollTable>
     <thead>
       <tr>
         <th class="small-cell">Code</th>
         <th>Label</th>
         <th>Area</th>
       </tr>
     </thead>
     <tbody>
       <tr  *ngFor="#country of countries; #last=last" *ngIf="last">
         <td class="small-cell">{{country.id}}</td>
         <td><a href="#" >{{country.id}}</a></td>
         <td>{{last}}</td>
       </tr>
     </tbody>
   </table>
`,
providers: [InfScrollTableService, HTTP_PROVIDERS],
directives: [InfScrollTableDirective]
})

export class AppComponent {
  public countries;
  constructor(private _infScrollTableService: InfScrollTableService){
    this._infScrollTableService.getCountries()
    .subscribe(
      data => {
        console.log(data);
        this.countries=data;
      });
  }
}

我的指示：

import {Directive, ElementRef} from 'angular2/core'

@Directive({
  selector: '[infScrollTable]',
})

export class InfScrollTableDirective{
   private _elem:HTMLTableElement;

   constructor(el: ElementRef) { this._elem = el.nativeElement; console.log(el)}
   bord(last:boolean){
    if(!last){
      return
    }
    console.log(this._elem)
    var th = this._elem.tHead.rows[this._elem.tHead.rows.length - 1].cells;
    var td = this._elem.tBodies[0].rows[0].cells;
    var tdLen = td.length - 1;
    var j = 0;
    for (; j < tdLen; j++) {
      if (th[j].offsetWidth > td[j].offsetWidth) {
        td[j].style.width = th[j].offsetWidth + 'px';
        th[j].style.width = th[j].offsetWidth + 'px';
      } else {
        th[j].style.width = td[j].offsetWidth + 'px';
        td[j].style.width = td[j].offsetWidth + 'px';
      }
    }
  }
}

在这里，我尝试了多个东西，其中最后一个最有意义的地方，我将ngIf中的“last”传递给一个函数，但是当我在控制台上记录接收到的值时，它是未定义的

在角度1我实现了我想要的使用

$scope.$on('LastElem', function(){...})

1 回答

一种方法是将指令应用于所有行并传递 last . 在 last 为真的情况下，该指令实际上做了一些事情 .

@Directive({selector: '[isLast]'})
export class LastDirective{
   @Input() isLast:boolean;
   @Output() lastDone:EventEmitter<boolean> = new EventEmitter<boolean>();
   ngOnInit() {
     if(this.isLast) {
       this.lastDone.emit(true);
     }
   }
}

<tr  *ngFor="let country of countries; let last=last" [isLast]="last" (lastDone)="doSomething()">

您还可以创建提供其他功能的自定义 ngFor .

回复于 2024-04-28T04:08:35+08:00

在ngFor中加载最后一项后调用指令

1 回答

相关问题