在 ngFor 中加载最后一项后调用指令
Calling a directive after the load of last item in ngFor
我有一个包含 table 的组件,我在 tBody 内的一行上调用 ngFor,问题是我需要在 Table 上应用的指令是 运行 加载 ngFor 的最后一个元素后。
这是我的组件
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" 传递给了一个函数,但是当我在控制台上记录接收到的值时,它是未定义的
在 angular 1 我使用
实现了我想要的
$scope.$on('LastElem', function(){...})
一种方法是将指令应用于所有行并传递 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
以提供额外的功能。
我有一个包含 table 的组件,我在 tBody 内的一行上调用 ngFor,问题是我需要在 Table 上应用的指令是 运行 加载 ngFor 的最后一个元素后。
这是我的组件
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" 传递给了一个函数,但是当我在控制台上记录接收到的值时,它是未定义的
在 angular 1 我使用
实现了我想要的$scope.$on('LastElem', function(){...})
一种方法是将指令应用于所有行并传递 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
以提供额外的功能。