细说 Angular 2+ 的表单(一):模板驱动型表单
细说 Angular 2+ 的表单(二):响应式表单
摘要
在企业应用开发时,表单是一个躲不过去的事情,和面向消费者的应用不同,企业领域的开发中,表单的使用量是惊人的。这些表单的处理其实是一个挺复杂的事情,比如有的是涉及到多个 Tab 的表单,有的是向导形式多个步骤的,各种复杂的验证逻辑和时不时需要弹出的对话框等等。笔者试图在这一系列文章中对 Angular 中的表单处理做一个相对完整的梳理。
Angular 中提供两种类型的表单处理机制,一种叫模版驱动型(Template Driven)的表单,另一种叫模型驱动型表单( Model Driven ),这后一种也叫响应式表单 ( Reactive Forms ),由于模版驱动中有一个 ngModel
的指令,容易和这里说的模型驱动混淆,所以在我们的文章中叫后一种说法:响应式表单。
第一篇主要介绍模版驱动型的表单。
号外
本文评论区会抽出5位童鞋,赠送笔者的 《Angular 从零到一》纸书,机不可失,大家踊跃发言哦。
模版驱动的表单
模版驱动的表单和 AngularJS 对于表单的处理类似,把一些指令(比如 ngModel
)、数据值和行为约束(比如 require
、minlength
等等)绑定到模版中(模版就是组件元数据 @Component
中定义的那个 template
),这也是模版驱动这个叫法的来源。总体来说,这种类型的表单通过绑定把很多工作交给了模版。
模版驱动的例子
还是用例子来说话,比如我们有一个用户注册的表单,用户名就是 email
,还需要填的信息有:住址、密码和重复密码。这个应该是比较常见的一个注册时需要的信息了。那么我们第一步来建立领域模型:
// src/app/domain/index.ts
export interface User {// 新的用户id一般由服务器自动生成,所以可以为空,用 ? 标示id?: string; email: string;password: string;repeat: string;address: Address;
}export interface Address {province: string; // 省份city: string; // 城市area: string; // 区县addr: string; // 详细地址
}复制代码
接下来我们建立模版文件,一个最简单的 HTML 模版,先不增加任何的绑定或事件处理:
<!-- template-driven.component.html -->
<form novalidate><label><span>电子邮件地址</span><inputtype="text"name="email"placeholder="请输入您的 email 地址"></label><div><label><span>密码</span><inputtype="password"name="password"placeholder="请输入您的密码"></label><label><span>确认密码</span><inputtype="password"name="repeat"placeholder="请再次输入密码"></label></div><div ><label><span>省份</span><select name="province"><option value="">请选择省份</option></select></label><label><span>城市</span><select name="city"><option value="">请选择城市</option></select></label><label><span>区县</span><select name="area"><option value="">请选择区县</option></select></label><label><span>地址</span><input type="text" name="addr"></label></div><button type="submit">注册</button>
</form>复制代码
渲染之后的效果就像下面这样:
数据绑定
对于模版驱动型的表单处理,我们首先需要在对应的模块中引入 FormsModule
,这一点千万不要忘记了。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from "@angular/forms";
import { TemplateDrivenComponent } from './template-driven/template-driven.component';@NgModule({imports: [CommonModule,FormsModule],exports: [TemplateDrivenComponent],declarations: [TemplateDrivenComponent]
})
export class FormDemoModule { }复制代码
进行模版驱动类型的表单处理的一个必要步骤就是建立数据的双向绑定,那么我们需要在组件中建立一个类型为 User
的成员变量并赋初始值。
// template-driven.component.ts
// 省略元数据和导入的类库信息
export class TemplateDrivenComponent implements OnInit {user: User = {email: '',password: '',repeat: '',address: {province: '',city: '',area: '',addr: ''}};// 省略其他部分
}复制代码
有了这样一个成员变量之后,我们在组件模版中就可以使用 ngModel
进行绑定了。
令人困惑的 ngModel
我们在 Angular 中可以使用三种形式的 ngModel
表达式: ngModel
, [ngModel]
和 [(ngModel)]
。但无论那种形式,如果你要使用 ngModel
就必须为该控件(比如下面的 input
)指定一个 name
属性,如果你忘记添加 name
的话,多半你会看到下面这样的错误:
ERROR Error: Uncaught (in promise): Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.复制代码
ngModel 和 FormControl
假如我们使用的是 ngModel ,没有任何中括号小括号的话,这代表着我们创建了一个 FormControl 的实例,这个实例将会跟踪值的变化、用户的交互、验证状态以及保持视图和领域对象的同步等工作。
<inputtype="text"name="email"placeholder="请输入您的 email 地址"ngModel>复制代码
如果我们将这个控件放在一个 Form 表单中, ngModel
会自动将这个 FormControl 注册为 Form 的子控件。下面的例子中我们在 <form>
中加上了 ngForm
指令,声明这是一个 Angular 可识别的表单,而 ngModel
会将 <input>
注册成表单的子控件,这个子控件的名字就是 email
,而且 ngModel
会基于这个子控件的值去绑定表单的的值,这也是为什么需要显式声明 name
的原因。
其实在我们导入 FormsModule
的时候,所有的 <form>
标签都会默认的被认为是一个 NgForm
,因此我们并不需要显式的在标签中写 ngForm
这个指令。
<!-- ngForm 并不需要显示声明,任何 <form> 标签默认都是 ngForm -->
<form novalidate ngForm><inputtype="text"name="email"placeholder="请输入您的 email 地址"ngModel>
</form>复制代码
这一切现在都是不可见的,所以大家可能还是有些困惑,那么下面我们将其“可视化”,这需要我们引用一下表单对象,所以我们使用 #f="ngForm"
以便我们可以在模版中输出表单的一些特性。
<!-- 使用 # 把表单对象导出到 f 这个可引用变量中 -->
<form novalidate #f="ngForm">...
</form>
<!-- 将表单的值以 JSON 形式输出 -->
{{f.value | json}}复制代码
这时如果我们在 email 中输入 sss
,可以看到下图的以 JSON 形式出现的表单值:
单向数据绑定
那么接下来,我们看看 [ngModel]
有什么用?如果我们想给控件设置一个初始值怎么办呢,这时就需要进行一个单向绑定,方向是从组件到视图。我们可以做的是在初始化 User
的时候,将 email
属性设置成 wang@163.com
user: User = {email: 'wang@163.com',...};复制代码
而且在模版中使用 [ngModel]="user.email"
进行单向绑定,这个语法其实和普通的属性绑定是一样的,用中括号标示这是一个要进行数据绑定的属性,等号右边是需要绑定的值(这里是 user.email
)。那么我们就可以得到下面这样的输出了, email
的初始值被绑定成功!
双向数据绑定
但上面的例子存在一个问题,数据的绑定是单向的,也就是说,在输入框进行输入的时候,我们的 user
的值不会随之改变的。为了更好的说明,我们将 user
和 表单的值同时输出
<div><span>user: </span> {{user | json}}
</div>
<div><span>表单:</span> {{f.value | json}}
</div>复制代码
此时我们将默认的电子邮件改成 wang@gmail.com
的话,表单的值是改变了,但 user
并未改变。
如果我们希望的是在输入时,这个输入的值也反向的影响我们的 user
对象的值的话,那就需要用到双向绑定了,也就是 [(ngModel)]
需要上场了。
无论如何,这个 [()]
表达真是很奇怪的样子,其实这个表达是一个语法糖。只要我们知道下面的两种写法是等价的,我们就会很清楚的理解了:用这个语法糖你就不用既写数据绑定又写事件绑定了。
<input [(ngModel)]="user.email">
<input [ngModel]="user.email"` (ngModelChange)="user.email = $event">复制代码
ngModelGroup 是什么鬼?
如果我们仔细观察上面的输出的话,会发现一个问题: user
中是有一个嵌套对象 address
的,而表单中没有嵌套对象的。如果要实现表单中的结构和领域对象的结构一致的话,我们就得请出 ngModelGroup
了。ngModelGroup
会创建并绑定一个 FormGroup 到该 DOM 元素。 FormGroup 又是什么呢?简单来说,是一组 FormControl。
<!-- 使用 ngModelGroup 来创建并绑定 FormGroup --><div ngModelGroup="address"><label><span>省份</span><select name="province" (change)="onProvinceChange()" [(ngModel)]="user.address.province"><option value="">请选择省份</option><option [value]="province" *ngFor="let province of provinces">{{province}}</option></select></label><!-- 省略其他部分 --></div>复制代码
这样的话,我们再来看一下输出,现在就完全一致了:
数据验证
模版驱动型的表单的验证也是主要由模版来处理的,在看怎么使用之前,需要界定一下验证规则:
- 三个必填项:
email
,password
和repeat
email
的形式需要符合电子邮件的标准password
和repeat
必须一致
当然除了这几个规则,我们还希望在表单未验证通过时提交按钮是不可用的。
<form novalidate #f="ngForm"><label><span>电子邮件地址</span><inputtype="text"name="email"placeholder="请输入您的 email 地址"[ngModel]="user.email"requiredpattern="([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,4}"></label><div><label><span>密码</span><inputtype="password"name="password"placeholder="请输入您的密码"[(ngModel)]="user.password"requiredminlength="8"></label><label><span>确认密码</span><inputtype="password"name="repeat"placeholder="请再次输入密码"[(ngModel)]="user.repeat"requiredminlength="8"></label></div><!-- 省略其他部分 --><button type="submit" [disabled]="f.invalid">注册</button>
</form>
<div>复制代码
Angular 中有几种内建支持的验证器( Validators )
- required - 需要 FormControl 有非空值
- minlength - 需要 FormControl 有最小长度的值
- maxlength - 需要 FormControl 有最大长度的值
- pattern - 需要 FormControl 的值可以匹配正则表达式
如果我们想看到结果的话,我们可以在模版中加上下面的代码,将错误以 JSON 形式输出即可。
<div><span>email 验证:</span> {{f.controls.email?.errors | json}}
</div>复制代码
我们看到,如果不填电子邮件的话,错误的 JSON 是 {"required": true}
,这告诉我们目前有一个 required
的规则没有被满足。
当我们输入一个字母 w
之后,就会发现错误变成了下面的样子。这是因为我们对于 email
应用了多个规则,当必填项满足后,系统会继续检查其他验证结果。
{
"pattern": { "requiredPattern": "^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,4}$", "actualValue": "w" }
}复制代码
通过几次实验,我们应该可以得出结论,当验证未通过时,验证器返回的是一个对象, key 为验证的规则(比如 required, minlength 等),value 为验证结果。如果验证通过,返回的是一个 null
。
知道这一点后,我们其实就可以做出验证出错的提示了,为了方便引用,我们还是导出 ngModel
到一个 email
引用,然后就可以访问这个 FormControl 的各个属性了:验证的状态( valid/invalid )、控件的状态(是否获得过焦点 -- touched/untouched,是否更改过内容 -- pristine/dirty 等)
<label><span>电子邮件地址</span><input...[ngModel]="user.email"#email="ngModel">
</label>
<div *ngIf="email.errors?.required && email.touched" class="error">email 是必填项
</div>
<div *ngIf="email.errors?.pattern && email.touched" class="error">email 格式不正确
</div>复制代码
自定义验证
内建的验证器对于两个密码比较的这种验证是不够的,那么这就需要我们自己定义一个验证器。对于响应式表单来说,会比较简单一些,但对于模版驱动的表单,这需要我们实现一个指令来使这个验证器更通用和更一致。因为我们希望实现的样子应该是和 required
、minlength
等差不多的形式,比如下面这个样子 validateEqual="repeat"
<div><label><span>密码</span><inputtype="password"name="password"placeholder="请输入您的密码"[(ngModel)]="user.password"requiredminlength="8"validateEqual="repeat"></label><label><span>确认密码</span><inputtype="password"name="repeat"placeholder="请再次输入密码"[(ngModel)]="user.repeat"requiredminlength="8"></label></div>复制代码
那么要实现这种形式的验证的话,我们需要建立一个指令,而且这个指令应该实现 Validator
接口。一个基础的框架如下:
import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';@Directive({selector: '[validateEqual][ngModel]',providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(()=>RepeatValidatorDirective), multi: true }]
})
export class RepeatValidatorDirective implements Validator{constructor() { }validate(c: AbstractControl): { [key: string]: any } {return null;}
}复制代码
我们还没有开始正式的写验证逻辑,但上面的框架已经出现了几个有意思的点:
- Validator 接口要求必须实现的一个方法是
validate(c: AbstractControl): ValidationErrors | null;
。这个也就是我们前面提到的验证正确返回 null 否则返回一个对象,虽然没有严格的约束,但其 key 一般用于表示这个验证器的名字或者验证的规则名字,value 一般是失败的原因或验证结果。 - 和组件类似,指令也有
selector
这个元数据,用于选择那个元素应用该指令,那么我们这里除了要求 DOM 元素应用validateEqual
之外,还需要它是一个ngModel
元素,这样它才是一个 FormControl,我们在 validate 的时候才是合法的。 - 那么那个 providers 里面那些面目可憎的家伙又是干什么的呢? Angular 对于在一个 FormControl 上执行验证器有一个内部机制: Angular 维护一个令牌为
NG_VALIDATORS
的multi provider
(简单来说,Angular 为一个单一令牌注入多个值的这种形式叫multi provider
)。所有的内建验证器都是加到这个NG_VALIDATORS
的令牌上的,因此在做验证时,Angular 是注入了NG_VALIDATORS
的依赖,也就是所有的验证器,然后一个个的按顺序执行。因此我们这里也把自己加到这个NG_VALIDATORS
中去。 - 但如果我们直接写成
useExisting: RepeatValidatorDirective
会出现一个问题,RepeatValidatorDirective
还没有生成,你怎么能在元数据中使用呢?这就需要使用forwardRef
来解决这个问题,它接受一个返回一个类的函数作为参数,但这个函数不会立即被调用,而是在该类声明后被调用,也就避免了undefined
的状况。
下面我们就来实现这个验证逻辑,由于密码和确认密码有主从关系,并非完全的平行关系。也就是说,密码是一个基准对比对象,当密码改变时,我们不应该提示密码和确认密码不符,而是应该将错误放在确认密码中。所以我们给出另一个属性 reverse
。
export class RepeatValidatorDirective implements Validator{constructor(@Attribute('validateEqual') public validateEqual: string,@Attribute('reverse') public reverse: string) { }private get isReverse() {if (!this.reverse) return false;return this.reverse === 'true' ? true: false;}validate(c: AbstractControl): { [key: string]: any } {// 控件自身值let self = c.value;// 要对比的值,也就是在 validateEqual=“ctrlname” 的那个控件的值let target = c.root.get(this.validateEqual);// 不反向查询且值不相等if (target && self !== target.value && !this.isReverse) {return {validateEqual: true}}// 反向查询且值相等if (target && self === target.value && this.isReverse) {delete target.errors['validateEqual'];if (!Object.keys(target.errors).length) target.setErrors(null);}// 反向查询且值不相等if (target && self !== target.value && this.isReverse) {target.setErrors({validateEqual: true})}return null;}
}复制代码
这样改造后,我们的模版文件中对于密码和确认密码的验证器如下:
<inputtype="password"name="password"placeholder="请输入您的密码"[(ngModel)]="user.password"#password="ngModel"requiredminlength="8"validateEqual="repeat"reverse="true">
<!-- 省略其他部分 -->
<inputtype="password"name="repeat"placeholder="请再次输入密码"[(ngModel)]="user.repeat"#repeat="ngModel"requiredminlength="8"validateEqual="password"reverse="false">复制代码
表单的提交
表单的提交比较简单,绑定表单的 ngSubmit
事件即可
<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f, $event)">复制代码
但需要注意的一点是,button如果不指定类型的话,会被当做 type="submit"
,所以当按钮不是进行提交表单的话,需要显式指定 type="button"
。而且如果遇到点击提交按钮页面刷新的情况的话,意味着默认的表单提交事件引起了浏览器的刷新,这种时候需要阻止事件冒泡。
onSubmit({value, valid}, event: Event){ if(valid){console.log(value);}event.preventDefault();
}复制代码
对于模板驱动的表单,我们就先总结到这里,下一篇文章我们会一起讨论响应式表单。
本文代码:github.com/wpcfan/ng-f…
最后再提一下,本文评论区会抽出5人赠送我的 《Angular 从零到一》纸书,欢迎大家围观、订购、提出宝贵意见。
下面是书籍的内容简介:
本书系统介绍Angular的基础知识与开发技巧,可帮助前端开发者快速入门。共有9章,第1章介绍Angular的基本概念,第2~7章从零开始搭建一个待办事项应用,然后逐步增加功能,如增加登录验证、将应用模块化、多用户版本的实现、使用第三方样式库、动态效果制作等。第8章介绍响应式编程的概念和Rx在Angular中的应用。第9章介绍在React中非常流行的Redux状态管理机制,这种机制的引入可以让代码和逻辑隔离得更好,在团队工作中强烈建议采用这种方案。本书不仅讲解Angular的基本概念和最佳实践,而且分享了作者解决问题的过程和逻辑,讲解细腻,风趣幽默,适合有面向对象编程基础的读者阅读。
京东链接:item.m.jd.com/product/120…
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 【Angular实战/网易云】模态框(一)
一. 生成模态框 当用户点击登陆或者注册的时候,就会跳出来一个对话框,要求用户输入用户名和密码等信息。 这个对话框说专业点就是模态框,要生成这个模态框我们得借助Overlay实例,这个之前在讲解搜索组件的时候已经提到过了。 pri…...
2024/5/2 11:48:31 - 缝双眼皮的线容易断吗
...
2024/5/7 21:49:52 - Angular 2.0 从0到1 (五)
第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五…...
2024/4/21 7:37:05 - 双眼皮拆线去啥地方
...
2024/4/21 7:37:05 - ionic 2+ 手势解锁界面
ionic 2 手势解锁界面 一些对安全要求比较高的app少不了锁屏页面,而手势解锁对于用户来说使用方便,对于程序员来说小有挑战,怎么有弃之不用的道理。效果图 效果图处理短,方便大家阅读 下面附上源码,源码的注释加上语义…...
2024/4/21 7:37:04 - 福清有在济宁李建纹绣做过双眼皮的吗
...
2024/5/2 7:02:53 - 沧州拉双眼皮哪家好
...
2024/4/21 7:37:03 - 南昌全切双眼皮多少钱
...
2024/4/20 12:20:37 - 全切双眼皮厚度不一样怎么回事
...
2024/5/2 14:45:32 - 全切双眼皮北京修复案例贴吧
...
2024/5/2 12:43:47 - 割双眼皮影响视力吗
...
2024/5/2 18:49:42 - angularjs写公共方法
use strict; angular.module(fast-westone).factory(commonUtilService, function () {return {/*** 将json转成form Data* param params* returns {string}*/transform: function (params) {var str [];for (var p in params) {var a params[p] ;if(!a && a! false …...
2024/4/21 7:36:57 - gulp+webpack+angular1的一点小经验(第三部分使用一些angular1的插件ui-bootstrap与highcharts)...
第一个要介绍的是我们的麻烦制造器:angular-ui-bootstrap ui-bootstrap可以有很多通用的插件给大家用,比如弹窗啊(modal),翻页控件啊(pagination),为什么说它麻烦呢,…...
2024/4/20 18:47:01 - angular-ui-bootstrap的弹出框定义成一个服务的实践(二)
定义一个弹出框的服务:alert_boxdefiine(["app"],function(mainapp){mainapp.controller(ModalInstanceCtrl,[ "$scope","$uibModalInstance","items",function ($scope, $uibModalInstance, items) {$scope.items items;…...
2024/5/2 20:18:23 - 割双眼皮公立医院
...
2024/4/25 21:57:59 - 如何在angular.js中优雅的使用ui.bootstrap的modal组件
ui.bootstrap的modal组件可以很方便地实现页面controller与模态框controller之间通信,特别是弹出的模态框中有比较复杂的表格信息需要用户填写,下面切入主题: 注册全局模态框实例的controller angular.module(myApp.Controllers, [ui.bootstr…...
2024/4/20 13:17:10 - AngularJS+RequireJs实现动态加载JS和页面的方案研究
摘要:本文是笔者研究了几天的动态加载方案的成果,前台使用的是AngularJSRequireJsangular-ui-routerangularAMD。后台使用了SpringMVCSpring。 1、入口页面 存放地址:src/main/webapp/WEB-INF/view/workflow/workflow.jsp<!DOCTYPE html&g…...
2024/5/2 19:09:43 - 实现pdf、jpg、png等预览
个人总结 这里使用object元素来实现pdf、图片等预览显示效果。 预览弹框html页 <div style"min-height:300px;"><div class"text-left" ng-hide"isHideToolBar" style"width:5%;float:left;"><span ng-click"over…...
2024/4/20 18:46:55 - 收集关于angular与JS的一些常见问题 总结
1:angularjs 指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 在directive的link中有一个$http请求,当请求完成后根据返回的值动态做element.append(......);这个操作,能显示没问题,可问题是我动态组的HTML里面有ng-c…...
2024/5/3 13:18:25 - lua解析xml总结
lua解析xml有很多的第三方的库,例如:http://lua-users.org/wiki/LuaXml。但是每个库都有各自的优点和使用是否方便。我一开始是打算使用luaXml库,在网上也找了很多的关于他的使用方法的blog。但是我觉得它很难用,遍历xml的时候,竟然是以数组下标的方式去进行访问,果断放弃…...
2024/4/22 14:11:20
最新文章
- Fizzler库+C#:从微博抓取热点的最简单方法
概述 在这篇技术文章中,我们将深入研究如何利用Fizzler库结合C#语言,以实现从微博平台抓取热点信息的功能。微博作为中国乃至全球范围内具有重要影响力的社交媒体平台之一,在互联网信息传播中扮演着举足轻重的角色。通过Fizzler这一强大的.N…...
2024/5/8 5:54:22 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/5/7 10:36:02 - 数据挖掘中的PCA和KMeans:Airbnb房源案例研究
目录 一、PCA简介 二、数据集概览 三、数据预处理步骤 四、PCA申请 五、KMeans 聚类 六、PCA成分分析 七、逆变换 八、质心分析 九、结论 十、深入探究 10.1 第 1 步:确定 PCA 组件的最佳数量 10.2 第 2 步:使用 9 个组件重做 PCA 10.3 解释 PCA 加载和特…...
2024/5/7 6:40:17 - PHP+python高校教务处工作管理系统q535p
开发语言:php 后端框架:Thinkphp/Laravel 前端框架:vue.js 服务器:apache 数据库:mysql 运行环境:phpstudy/wamp/xammp等 系统根据现有的管理模块进行开发和扩展,采用面向对象的开发的思想和结构化的开发方…...
2024/5/7 9:06:56 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/7 5:50:09 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/7 9:45:25 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/5/4 23:54:56 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/7 14:25:14 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/5/4 23:54:56 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/5/4 23:55:05 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/5/4 23:54:56 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/5/7 11:36:39 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/5/4 23:54:56 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/6 1:40:42 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/5/4 23:54:56 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/5/4 23:55:17 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/5/7 9:26:26 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/5/4 23:54:56 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/4 23:55:06 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/5/5 8:13:33 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/5/4 23:55:16 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/5/4 23:54:58 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/6 21:42:42 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/5/4 23:54:56 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57