模态卡在角度的第一次迭代中？

Posted 2023-03-25

【中文标题】模态卡在角度的第一次迭代中？

【英文标题】：modal stuck with first iteration in angular?

【发布时间】：2021-05-05 02:19:26

【问题描述】：

我试图在 ngFor 中的每次迭代都生成模态。就像我传递给模态的数据没有随着 ngFor 的迭代而改变（卡在第一次迭代中）。我不知道该怎么办。 这是我的html代码。

<div class="container">
    <div *ngFor="let note of allNotes.slice().reverse()">
        <div class="card">
            <div style="padding: 20px;">
                <img class="card-img-top" src="../../assets/angular.png">
            </div>

            <div class="card-body">
                <h5 class="card-title">note.title</h5>
                <p class="card-text">note.content | summary:300 </p>
                <button type="button" class="btn btn-info btn-lg" (click)="openModal(note)">Show Details</button>
                <!-- Modal Starts -->
                <div class="modal" role="dialog" [ngStyle]="'display':display">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title"> note.title </h4>
                                <button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span
                                        aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="modal-body">
                                 note.content 
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" (click)="onCloseHandled()">Close</button>
                                <button type="button" class="btn btn-primary">Delete Note</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal Ends -->
            </div>
            <div class="card-footer">
                 note.time | timeAgo 
            </div>
        </div>
    </div>
</div>

这是我的 .ts 文件

import  Component, OnInit  from '@angular/core';
import notes from '../notes.data';

@Component(
  selector: 'show-notes',
  templateUrl: './show-notes.component.html',
  styleUrls: ['./show-notes.component.css']
)
export class ShowNotesComponent implements OnInit 
  allNotes = notes;
  constructor()  

  ngOnInit(): void 
  

  display = "none";

  openModal() 
    this.display = "block";
  
  onCloseHandled() 
    this.display = "none";
  

你能帮我解决这个问题吗？提前致谢。

【问题讨论】：

您的组件中的allNotes 是什么样的？

能否添加TS部分？

`界面备注id: number, time: number, title: string, content: string;

【参考方案1】：

对于slice()，您必须给出开始值和结束值，我假设由于没有它，它只需要一个。如果您只对反转它们感兴趣，请删除 slice() 调用。

【讨论】：

这可能是为了克隆数组，因为reverse 发生了变异。