Question

当我尝试折叠或扩展div时遇到问题，其想法是查看数组中是否存在属性以查看其是否扩展或折叠，但是当我执行ngClass进行验证时，该类是从未添加。

目前，我的代码如下，将属性添加为与数组相对应的

  public expandRefresh(gameDate){

    if(!this.gamesRefresh.includes(gameDate)){
      this.gamesRefresh.push(gameDate);
    }
    else{
      this.gamesRefresh = this.gamesRefresh.filter( date => date !== gameDate);
    }

  }

下面是代码的一部分HTML

        <ng-container *ngFor="let dateGroup of gamesOffering.DateGrouping">
            <div #collapseall class="offering-games-wrapper" id="expandcollapse" collapsed="false" [ngClass]='{"collapsed": gamesRefresh.includes(dateGroup.GameDate) ? true : false}'>
                <div class="offering-games-header-table-date">
                    <span class="offering-games-desktop-date bigger-text">{{dateGroup.GameDate  | date : 'fullDate'}}</span>
                    <span class="offering-games-mobile-date bigger-text">{{dateGroup.GameDate  | date : 'MMM, dd'}}</span>
                    <div class="offering-games-header-table-collapse" (click)="expandRefresh(dateGroup.GameDate)">
                        <span></span>
                    </div>

Answer 1

您应该从函数expandRefresh（）返回一个值（例如：true或false）

Answer 2

显然，您正在检查对象数组中是否存在对象。重要的是要知道includes()函数是查找，是object 引用匹配的，而不是object的属性：

const dummyArray = [{1: 2}];
const dummyObject = {1: 2};
dummyArray.incluces(dummyObject) // return: false

//Same with Date object

const dateArr = [new Date('July 16, 2019')];
const dateObj = new Date('July 16, 2019');
dateArr.includes(dateObj) // return: false

因此，您应该根据对象property中的一个来确定该对象是否存在。我为此使用find()函数。

  gamesRefresh.find( x => x.getTime() == dateGroup.GameDate.getTime()) ? true : false

如何展开和折叠，取决于属性是否在数组中

2 个答案: