Renderer2 - 刪除指令中的 nativeElement

Question

在我的組件中，我有一個帶有選項元素和指令的 for 循環。 現在我檢查指令是否有數據可用，如果沒有，我將從 DOM 中刪除 ngOption 元素。 但這不起作用......我在選項列表中看到仍然是空元素。

this.renderer.setStyle(this.el.nativeElement, 'display', 'none');

組件.ts

<ng-select id="event1" style="width: 400px; padding-top: 12px" class="ml-2"
 (change)="search()" [{(ngModel)]="selectedEvent" [disabled]="blockedActionWhileLoading">
  <div *ngFor="let event of events">
    <ng-option appEventFilter [event]="event">
    </ng-option>
  </div>
</ng-select>

指示

import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
import { TicketState } from 'src/app/tickets/ticket.model';
import { TicketService } from 'src/app/tickets/ticket.service';
import { Event } from 'src/app/verwaltung/events/event.model';
import { DatePipe } from '@angular/common';

@Directive({
  selector: '[appEventFilter]',
})
export class EventFilterDirective implements OnInit {
  @Input() event: Event;

  constructor(
    private ticketService: TicketService,
    private el: ElementRef,
    private renderer: Renderer2,
    private datePipe: DatePipe
  ) {}

  ngOnInit(): void {
    let t = this.ticketService.tickets.filter(
      (ticket) =>
        ticket.event._id === this.event._id && ticket.state === TicketState.NEW
    );

    if (t.length > 0) {
      let datePipeTimeString = this.datePipe.transform(
        this.event.date,
        'HH:mm'
      );
      let datePipeDateString = this.datePipe.transform(this.event.date);
      this.renderer.setProperty(
        this.el.nativeElement,
        'innerHTML',
        `${this.event.artist.name} - ${this.event.location.city} -
        ${this.event.location.description} -
                         ${datePipeDateString} -
                         ${datePipeTimeString}
                        `
      );
    } else {
      console.log('empty');
      this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
    }
  }
}

Answer 1

就個人而言，我只會通過在events中寫入值之前過濾它們或使用 pipe 來呈現包含有效數據的條目。

pipe 解決方案可能是這里最有趣的解決方案，因為它不會修改原始數組

過濾器.pipe.ts

@Pipe({ name: 'filterEvents' })
export class FilterEventsPipe implements PipeTransform {

  constructor(private ticketService: TicketService){}

  // I only assume that the type is Ticket
  transform(tickets: Ticket[]): Ticket[] {
 
    const filteredTickets = tickets.filter(ticket => {
      return this.ticketService.tickets.some(
        t => t.event.__id === ticket.event._id && t.state === TicketState.NEW
      );
    });
    return filteredTickets;

  }

}

然后使用 pipe 如下：

<div *ngFor="let event of events | filterEvents ">
  <ng-option appEventFilter [event]="event"></ng-option>
</div>

通過這種方式，您不僅可以解決空條目的問題，還可以減少頁面上div的數量，因為您只呈現包含相關數據的條目。

Answer 2

@Batajus

謝謝......這是一個很好的解決方案......我必須將值從門票更改為事件（EventFilter）

import { Pipe, PipeTransform } from '@angular/core';
import { Ticket, TicketState } from 'src/app/tickets/ticket.model';
import { TicketService } from 'src/app/tickets/ticket.service';
import { Event } from 'src/app/verwaltung/events/event.model';

@Pipe({ name: 'filterEvents' })
export class FilterEvents2Pipe implements PipeTransform {
  constructor(private ticketService: TicketService) {}

  // I only assume that the type is Ticket
  transform(events: Event[], tickets: Ticket[]): Event[] {
    if (!events) return;
    const filteredEvents = events.filter((e) => {
      return tickets.some((ticket) => {
        return ticket.event._id == e._id && ticket.state == 'NEW';
      });
    });

    return filteredEvents;
  }
}

另一個問題...什么更快... ngIf 或指令？ 我在 html 中有大量 ngIf 的數據列表。 最好為所有這些制定指令？

 *ngIf="
  ticket.state === TicketState.BILLED ||
  ticket.state === TicketState.BILLEDEX ||
  ticket.state === TicketState.WRITTENOFF"