Typescript 在列表的指令中使用intersectionObservable隐藏按钮

这是预期的输出吗？我将指令附加到ngFor，并使用ngFor的first变量允许指令只对第一个元素起作用，然后代码开始正常工作！

Main TS

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { InviewDirective } from './in-view.指令';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, InviewDirective],
  template: `
    <h2>Users</h2>
    <button #button style="position: fixed; left: 0px;top:0px;">just a button</button>

    <ul>
      <li *ngFor="let user of users;let first=first" [appInView]="first" [elementToWatch]="button">
        <h3>{{user.firstName}} {{user.lastName}}</h3>
        <ul>
          <li>Age:{{user.age}}</li>
          <li>Address - > {{user.address.city}} {{user.address.street}},{{user.address.state}}</li>
        </ul>
      </li>
    </ul>
  `,
})
export class App {
  users: any[] = [];
  constructor() {}

  ngOnInit() {
    this.users = [
      {
        firstName: 'Nasir',
        lastName: 'Shaik',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Jyothi Nager 5th Street',
        },
      },
      {
        firstName: 'Asif',
        lastName: 'Shaik',
        age: 27,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'vedayapalam 8th street',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
      {
        firstName: 'Kumar',
        lastName: 'Sitty',
        age: 28,
        address: {
          city: 'Nellore',
          state: 'AP',
          street: 'Chandramouli nagar',
        },
      },
    ];

    this.addUser({
      firstName: 'Krishna',
      lastName: 'lankha',
      age: 26,
      address: {
        city: 'Tirupathi',
        state: 'AP',
        street: 'udyagari colony',
      },
    });
  }

  addUser(users: any) {
    this.users.push(users);
  }
}

bootstrapApplication(App);

指令

import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[appInView]',
  standalone: true,
})
export class InviewDirective implements AfterViewInit {
  @Input() elementToWatch?: HTMLElement; // Button
  @Input() appInView: boolean = false; // Button
  private observer?: IntersectionObserver;

  constructor(private el: ElementRef) {}
  ngAfterViewInit(): void {
    if (!this.appInView) return;
    this.observer = new IntersectionObserver(
      (entries) => {
        console.log(entries);
        if (entries[0].isIntersecting) {
          this.elementToWatch?.setAttribute('hidden', 'true');
        } else {
          this.elementToWatch?.removeAttribute('hidden');
        }
      },
      {
        threshold: 0.75,
      }
    );

    this.observer.observe(this.el.nativeElement as HTMLElement);
  }

  ngOnDestroy() {
    this.observer?.disconnect();
  }
}

stackblitz