为什么数据显示在 html 上并立即消失？ Angular

Question

我收到一个对象数组，我必须在其中创建新属性以在 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>

我不明白为什么找不到解决方案。有人告诉我我做错了什么。

Answer 1

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

Answer 2

最近我遇到了类似的问题。我的目标是在用户输入内容并按下回车键时将文本添加到文本 html 输入框下方的列表中。

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'add-subject-form',
  template: `
    <form (submit)="doNotSubmitForm($event)">    
      <input 
          type="text" class="form-control"
          (keyup.enter) = "addSubject(subject)" #subject>
      <ul class="list-group">
          <li 
              *ngFor="let item of items.controls" 
              class="list-group-item">{{item.value}}</li>
      </ul>
    </form>
  `,
  styleUrls: ['./add-subject-form.component.css']
})
export class AddSubjectFormComponent{

  form = new FormGroup({
    subjects: new FormArray([])
  });
  addSubject(pItem: HTMLInputElement) {
    this.items.push(new FormControl(pItem.value));
    pItem.value = '';
  }
  get items() {
    return this.form.controls['subjects'] as FormArray;
  }
  // By default the form gets submitted on keyUp.enter event.
  // doNotSubmitForm method prevents that default behaviour
  doNotSubmitForm(event: any) {
    event.preventDefault();
  }

}

我可以使用上面的模板和相应的 ts 组件中的必要代码实现功能 class。但问题是文本框变空了，下面的列表消失了，因为 html 表单在 keyup.enter 事件中默认提交。

因此我不得不在表单的提交事件中调用以下方法。

  doNotSubmitForm(event: any) {
    event.preventDefault();
  }

希望此信息丰富上下文。

为什么数据显示在 html 上并立即消失？ Angular

Why data get displayed on the html and instantly disappear? Angular

html

angular

object

angular7

arrayobject