javascript - 在 Angular 6 的组件中访问 *ngFor 最后

Question

在 Angular 6 中，我想访问 *ngFor 最后一个值，因为如果设置了最后一个值，我想操作

例如

<li [ngClass]="list.mydata==1?'replies a':'sent a'" *ngFor="let list of chatlist; let last=last;">
    <span [last]="last"></span>
    <img src="{{list.profile_img}}" alt="" />
    <div *ngIf="list.sender_type==0">
        <p>{{list.message}}{{last}}</p>
    </div>
    <div *ngIf="list.sender_type==1">
        <p style="background-color: burlywood;">{{list.message}}</p>
    </div>
 </li>

我想用 [(myvar)]=last 代替 let last=last我想绑定(bind)最后一个变量，这样我就可以在其组件中访问它是否已设置。

Answer 1

您可以创建一个自定义指令:

import { Directive, Output, EventEmitter, Input } from '@angular/core';

@Directive({
  selector: '[onCreate]'
})
export class OnCreate {

  @Output() onCreate: EventEmitter<any> = new EventEmitter<any>();
  constructor() {}
  ngOnInit() {      
     this.onCreate.emit('dummy'); 
  } 

}

然后你可以在你的*ngFor中使用它来调用你组件中的方法:

<li [ngClass]="list.mydata==1?'replies a':'sent a'" *ngFor="let list of chatlist; let last=last;">
    <span (onCreate)="onCreate(last)"></span>
    <img src="{{list.profile_img}}" alt="" />
    <div *ngIf="list.sender_type==0">
        <p>{{list.message}}{{last}}</p>
    </div>
    <div *ngIf="list.sender_type==1">
        <p style="background-color: burlywood;">{{list.message}}</p>
    </div>
</li>

然后在你的组件中:

  myvar: boolean = false;

  onCreate(last) {
    this.myvar = last;
  }

检查这个DEMO .