为什么数据显示在 html 上并立即消失? Angular
Why data get displayed on the html and instantly disappear? Angular
我收到一个对象数组,我必须在其中创建新属性以在 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>
我不明白为什么找不到解决方案。
有人告诉我我做错了什么。
我对数据在屏幕上消失的事实感到困惑,认为这是 html 或 css 的问题,但我不明白为什么。但实际上这是一个订阅问题,它依赖于在其他组件中调用的服务,并且通过我输入两次的应用程序流程,它覆盖了我的数据,显示了原件。
感谢大家的宝贵时间和帮助。
最近我遇到了类似的问题。
我的目标是在用户输入内容并按下回车键时将文本添加到文本 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
中显示 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>
我不明白为什么找不到解决方案。 有人告诉我我做错了什么。
我对数据在屏幕上消失的事实感到困惑,认为这是 html 或 css 的问题,但我不明白为什么。但实际上这是一个订阅问题,它依赖于在其他组件中调用的服务,并且通过我输入两次的应用程序流程,它覆盖了我的数据,显示了原件。 感谢大家的宝贵时间和帮助。
最近我遇到了类似的问题。 我的目标是在用户输入内容并按下回车键时将文本添加到文本 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();
}
希望此信息丰富上下文。