有没有办法根据孩子的状态将css应用于父元素？答案

【问题标题】：Is there a way to apply a css to a parent element depending on the child's status?有没有办法根据孩子的状态将css应用于父元素？
【发布时间】：2020-06-03 07:37:54
【问题描述】：

我输入了特定的上下文，这是我的 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>

segun mi iteraccion cuando pulso el boton con clase 'cart' cambio el color del propio boton y deseo ponerle un borde al div con clase 'itemlist'，para lo que activo un ngClass con nombre 'active'。 El questiona esta en que el borde se me activa para todos los itemlist de la pantalla , cuando lo que quiero es que solo se active aquel item list que cumple la condicion del ngClass en el boton con clase 'cart'。

正如您在我的 html 中看到的，我尝试使用类变量“isAdded”对其进行修改，但它修改了所有“itemlist”，并且我尝试根据 item.quantity 更改 [ngClass] 的条件但此时它会返回未定义的值

也就是说，问题是，有没有办法检测 item.quantity 在具有类 'itemlist' 的父组件级别上发生变化以修改其类？

提前感谢您的帮助

【问题讨论】：

请勿在ngFor 中使用this.market this 无效使用let product of market[selectedTab].products
@לבנימלכה 谢谢，我认为我应该使用它，因为我将它存储在我的 ts 中的类变量中，我发现它仍然有效，但我不知道这是一种滥用
这个仅在组件 html 中的组件 ts 中使用，这不是使用 :)

标签： css angular7 parent-child angular-ng-if ng-class

【解决方案1】：

我通过在原始数据加载中添加属性“isAdded: false”解决了这个问题，然后我实现了一个方法，在该方法中查找是否选择了项目的 id 并将类设置为 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;
  }

【讨论】：