为什么数据会显示在 html 上并立即消失？角答案

【问题标题】：Why data get displayed on the html and instantly disappear? Angular为什么数据会显示在 html 上并立即消失？角
【发布时间】：2020-09-28 19:56:53
【问题描述】：

我收到一个对象数组，我必须在其中创建新属性以在 html 中显示

    public inicializeData() {

        this.loaderService.eLoader.emit(true);
        this.cartsSubscription = this.cartsService.getCarts().subscribe(carts => {
            this.orders = carts;
            this.orders.forEach(cart => {
                cart.date = cart.functional_id.substring(0, 8);
                cart.order_number = cart.functional_id.substring(8, 14);
            });
            this.load = true;
            this.loaderService.eLoader.emit(false);
        });
    }

让一个对象创建后的新属性

  {
    "functional_id": "201911291131250012400000SD4AYAA1",
    "transactions": [
      {
        "quantity": 2,
        "price": 140,
        "item": {
          "name": "Carton de 10 coffrets",
          "description": "+ 2 recharges d'argile offertes",
          "product": {
            "name": "Coffret empreinte rouge"
          }
        }
      },
      {
        "quantity": 1,
        "price": 0,
        "item": {
          "name": "Petit modèle",
          "description": "Par 25",
          "product": {
            "name": "Sacs blancs",
            "description": "Pour les crémations Plurielles"
          }
        }
      }
    ],
    "date": "20191129",
    "order_number": "113125"
  },

在这个函数中，我从属性“functional_id”中提取了一个由前 8 位组成的数据，对应于创建日期，另一个由后面的 6 位组成，对应于一个注册号。这些是我保存在这个函数中的数据，分别名为“cart.date”和“cart.order_number”。

当我在 html 中显示它们时，它们会立即加载，但在一秒钟内，我创建的两个数据就会从屏幕上消失。

                <div class='order-list'>
                    <span *ngIf="!orders.length">No orders available</span>
                    <div class="fade-in" *ngFor="let order of orders; let i = index;">
                        <div class="row ciev-row header-row d-none d-lg-flex" [ngClass]="{'last': i === orders.length - 1}" (click)="toggle(order)">
                        <div class="col-sm-2 my-auto">{{order.functional_id}}</div>
                        <div class="col-sm-2 my-auto">{{order.date | date}}</div>
                        <div class="col-sm-2 my-auto">{{order.order_number}}</div>
                        </div>
                    </div>

我不明白为什么我找不到解决方案。有人给我一个想法，我做错了。

【问题讨论】：

这里看起来没什么问题。在闪电战中重新创建问题，如果 fade-in 类正在为事物设置动画，则可能是错误的 css。如果你删除它会发生什么？（旁注你可以在你的ngFor 中做let last = last;，而不是在ngClass 指令做{'last': last} 中将索引与长度进行比较）
@bryan60 的情况是 html 中的“order.functional_id”仍然显示。
当时看起来像是一些 css 问题，或者你在其他地方做了一些可疑的事情......你应该尝试在 stackblitz 中重新创建。
@MaihanNijat 你说得对，订阅需要两次，我想你必须看到它取决于我在几个组件中调用的服务这一事实。太感谢了！！！我不明白为什么会这样！
@javascript110899 很高兴您解决了您的问题。祝你好运。

标签： html angular object angular7 arrayobject

【解决方案1】：

我一直坚持数据在屏幕上消失的事实，认为这是 html 或 css 的问题，但我不明白为什么。但实际上这是一个订阅问题，它依赖于在其他组件中调用的服务以及我输入两次的应用程序流，它覆盖了我的数据，显示了原始数据。感谢大家的时间和帮助。

【讨论】：