有没有办法根据 child 的状态将 css 应用于 parent 元素？

Question

我放在具体的上下文中，这是我的html

<div class='table'>
      <div>
          <div *ngFor='let product of this.market[selectedTab].products | orderBy:"id"' class='itemlist'  [ngClass]="{'active': isAdded}">
            <div class='child'>
              <div class='first'>
                <div>
                  <h2>{{product.name}}</h2>
                  <ul class='subtitle' *ngIf='this.selectedTab === 0'>
                    <li class='itemsdesc' *ngFor='let item of product.items'>
                      <div>
                        <p>{{item.name}}</p>
                        <p>{{item.description}}</p>
                      </div>
                    </li>
                  </ul>
                  <p [innerHTML]='product.description' class='box-desc' *ngIf='product && product.description'></p>
                </div>
              </div>
            </div>
            <div class='child'>
              <div class='fourth'>
                <ul class='p-0 m-0'>
                  <li *ngFor='let item of product.items' class='def-number-input number-input d-flex justify-content-center'>
                    <a (click)='minus(item)' class='minus'[ngClass]="{'disable': isMinor}">-</a>
                    <input class='quantity' type='number' placeholder='0' [(ngModel)]='item.quantity'>
                    <a (click)='plus(item)' class='plus'>+</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class='child'>
              <div class='fifth'>
                <ul class='p-0 m-0'> 
                  <li *ngFor='let item of product.items; let i = index''>                
                    <button class='cart' [ngClass]="{'disable': isUndefined(item.quantity) || item.quantity === 0}" (click)='this.updateCart(item); this.getTotalItems()'><i class='icon-addcart'></i></button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

根据我的迭代，当我按下带有类 'cart' 的按钮时，我更改了按钮本身的颜色，并且我想在带有类 'itemlist' 的 div 上放置一个边框，为此我激活了一个名为 'active' 的 ngClass。问题是屏幕上的所有项目列表都激活了边框，而我想要的是只有满足类 'cart'.[=14] 按钮中 ngClass 条件的项目列表被激活. =]

正如您在我的 html 中看到的那样，我尝试使用 class 变量 'isAdded' 修改它，但它修改了所有 'itemlist' 并且我尝试根据 item.quantity 更改 [ngClass] 的条件，但此时 returns 值为未定义

也就是说，问题是，有没有一种方法可以检测到 item.quantity 在 parent 组件的水平上随 class 'itemlist' 变化到修改其 class?

提前感谢您的帮助

Answer 1

我已经通过在原始数据加载中添加属性 'isAdded: false' 解决了这个问题，然后我实现了一种方法，在该方法中我查找是否已选择项目的 id 并且我将 class 设置为 true

  someItemAdded(argproduct) {
    const products = this.market[this.selectedTab].products;
    const product = products.find(p => p.id === argproduct.id);
    const isAdded = product.items.some((i: any) => i.isAdded);
    return isAdded;
  }

有没有办法根据 child 的状态将 css 应用于 parent 元素？

Is there a way to apply a css to a parent element depending on the child's status?

css

parent-child

ng-class

angular-ng-if

angular7