доступ к * ng для последнего в его компоненте в угловых 6

Question

В угловых 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 Я хочу связать последнюю переменную, чтобы я мог получить доступ к ней, установлен или нет в ее компоненте.

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 .

Answer 2

например

<li [ngClass]="list.mydata==1?'replies a':'sent a'" *ngFor="let list of chatlist; let index=i;">

</li>

теперь вы превышаете последний элемент, как

<anyTag *ngIf="i === chatlist.length-1"></anyTag>

Answer 3

Angular предоставляет определенные локальные переменные при использовании *ngFor, например, last, которое (не так, как вы ожидаете в настоящее время) будет значением boolean, равным true, если это последний элемент.Это предназначено для добавления определенных стилей для примера к последнему элементу списка.

Если вы хотите использовать этот логический тип, вы уже правильно его используете, но, очевидно, элемент, использующий его, должен быть компонентом.Поэтому вместо

<span [last]="last"></span>

это должно быть что-то вроде

<my-component [last]="last"></my-component>

, где в my-component вы определяете

@Input last: boolean;

и, таким образом, имеете к нему доступ.