NgFor 在 Accordion 中扩展数据时出现的问题

Question

我一直在尝试使用 tailwind 的手风琴显示一系列帖子。当我控制台记录帖子时，帖子数组就在那里，但似乎存在扩展手风琴的问题。这种情况仅发生在动态数据中，当我使用硬编码数组进行测试时，它工作得很好。对于动态数据，它显示“绑定={”ng-reflect-ng-for-of”的注释：“[object Object]，[object Object”}”。

为了创建帖子并返回帖子数组，我正在使用一项服务，每当推送新帖子时，我都会发出新的帖子数组，然后模板将在其中订阅它。我做错了什么，请帮助迷失的灵魂..

创建后.component.ts：

export class PostCreateComponent {

  constructor(public postService: PostService){}

  onSubmit(form: NgForm) {
    if(form.invalid){
      return;
    }
    this.postService.addPost(form.value.title, form.value.content);
    form.reset();
  }
}

后期服务.ts：

@Injectable({ providedIn: 'root' })
export class PostService {
  posts: Post[] = [];
  updatePosts = new Subject<Post[]>()

  getPosts() {
    return [...this.posts];
  }

  returnUpdatePostListener() {
    return this.updatePosts.asObservable();
  }

  addPost(title: string, content: string) {
    const post: Post = {
      title: title,
      content: content
    }
    this.posts.push(post);
    this.updatePosts.next([...this.posts]);
  }
}

post-list.component.ts：

export class PostListComponent implements OnInit, OnDestroy {
  constructor(public postService: PostService) { }
  posts: Post[] = [];
  postsSub!: Subscription;

  ngOnInit(): void {
    this.posts = this.postService.getPosts();
    this.postsSub = this.postService.returnUpdatePostListener().subscribe(
      (posts: Post[]) => this.posts = posts
    )
  }

  ngOnDestroy(): void {
    this.postsSub.unsubscribe();
  }
}

post-list-component.html：

<div id="accordion-collapse" data-accordion="collapse">
  <div *ngFor="let post of posts; let i = index">
    <h2 attr.id="accordion-collapse-heading-{{i}}">
      <button type="button" [ngClass]="i === 0 ? 'rounded-t-xl':'rounded-none'"
        class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
        attr.data-accordion-target="#accordion-collapse-body-{{i}}" aria-expanded="false"
        attr.aria-controls="accordion-collapse-body-{{i}}">
        <span>{{post.title}} </span>
        <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M9 5 5 1 1 5" />
        </svg>
      </button>
    </h2>
    <div attr.id="accordion-collapse-body-{{i}}" class="hidden" attr.aria-labelledby="accordion-collapse-heading-{{i}}">
      <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
        <p class="mb-2 text-gray-500 dark:text-gray-400">{{post.content}}</p>
      </div>
    </div>
  </div>
</div>

Answer 1

我尝试重现您的示例，但我不明白如何在没有任何逻辑代码的情况下更改您的手风琴主体可见性。

所以我用

[ngClass]

做了一个例子来显示/隐藏你的手风琴主体：

为此，我们得到了一个整数数组，其中包含扩展的手风琴索引，该数组使用一种方法来存储或删除所需的面板。

  openedPosts:number[] = [];

  togglePost(index:number){
    if(this.openedPosts.includes(index)){
      this.openedPosts = this.openedPosts.filter(m=>m != index);
    }
    else{
      this.openedPosts.push(index);
    }
  }

然后在您的模板中我们可以像这样管理每个手风琴主体的可见性

 [ngClass]="openedPosts.includes(i) ? 'block' : 'hidden'"

请看下面的真实例子

https://stackblitz.com/edit/angular-ivy-pzmdfz?file=src%2Fapp%2Fapp.component.html