时间戳

首页 > 解决方案 > 在 Angular 6 的组件中访问 *ngFor last

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

问题描述

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

例如

<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 我想绑定最后一个变量，所以我可以访问它是否在其组件中设置。

标签： javascriptangular

解决方案

您可以创建自定义指令：

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

结帐此演示。

推荐阅读