我正在使用这个rxjs-websocket库来处理我的应用程序中的websockets.当我使用angular-cli构建站点并在浏览器中打开时,从服务器接收消息时出现错误:
WebSocket.socket.onclose的错误错误[as __zone_symbol__ON_PROPERTYclose]
但是当我刷新浏览器时,我没有收到错误,消息传递到UI.奇怪的.似乎浏览器正在关闭连接,刷新会触发重新连接(使用chrome).它可能是我的代码问题:
活message.service.ts
import { Injectable } from '@angular/core'
import { QueueingSubject } from 'queueing-subject'
import { Observable } from 'rxjs/Observable'
import websocketConnect from 'rxjs-websockets'
import 'rxjs/add/operator/share'
@Injectable()
export class LiveMessageService {
private inputStream: QueueingSubject<any>
public messages: Observable<any>
public connect() {
this.messages = websocketConnect(
'ws://www.dev.com:8080',
this.inputStream = new QueueingSubject<string>()
).messages.share()
}
public send(message: string):void {
this.inputStream.next(message)
}
}
MessageComponent.ts
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'
import { JwtService, LiveMessageService …我试图使用Momentjs返回通过月份名称的月号.例如,如果我将"July"传递给moment(),我希望返回7.
通过阅读文档后,我尝试了几种不同的方式,这种方式接近......
console.log(moment().month("July"));
在控制台中,埋在响应中我可以看到这个......
_monthsParse: Array[7]
谁能告诉我如何使用Momentjs正确返回月份数？
我是新手做出反应和变化,我很难弄清楚如何从服务器加载数据.我能够从本地文件加载相同的数据,没有任何问题.
所以首先我有这个控制器视图(controller-view.js),它将初始状态传递给视图(view.js)
控制器view.js
var viewBill = React.createClass({
getInitialState: function(){
return {
bill: BillStore.getAllBill()
};
},
render: function(){
return (
<div>
<SubscriptionDetails subscription={this.state.bill.statement} />
</div>
);
}
});
module.exports = viewBill;
view.js
var subscriptionsList = React.createClass({
propTypes: {
subscription: React.PropTypes.array.isRequired
},
render: function(){
return (
<div >
<h1>Statement</h1>
From: {this.props.subscription.period.from} - To {this.props.subscription.period.to} <br />
Due: {this.props.subscription.due}<br />
Issued:{this.props.subscription.generated}
</div>
);
}
});
module.exports = subscriptionsList;
我有一个动作文件,可以为我的应用程序加载INITAL数据.因此,这是不是作为用户操作调用的数据,而是在控制器视图中从getInitialState调用的数据
InitialActions.js
var InitialiseActions = {
initApp: function(){
Dispatcher.dispatch({ …我是新手编写单元测试,需要一些帮助来测试函数的一部分.
我的功能看起来像这样......
getData() {
return this.parameters.map(p => {
return {
name: p.name,
items: p.items.map(item => {
const toTime = item.hasOwnProperty('end') ? moment.utc(item.end._d).unix() : null;
const fromTime = item.hasOwnProperty('start') ? moment.utc(item.start._d).unix() : null;
return {
id: item.id,
fromTime: fromTime,
toTime: toTime,
};
}),
};
});
}
到目前为止我的测试看起来像这样(茉莉花)
describe('getData()', function() {
it('should return json data', function() {
$ctrl.parameters = [{
name: 'test',
items: [{
id: 1,
fromTime: null,
toTime: null
}, {
id: 13,
fromTime: null,
toTime: null
}]
}];
expect($ctrl.getData()).toEqual([{
name: …当用户在第一个输入字段中输入了 maxLength 个字符时，我想将焦点从一个输入字段移到另一个输入字段。因此，在我下面的示例中，当用户在日期输入中输入 2 个字符时，焦点将移至月份输入。
到目前为止，这是我的代码：
<input formControlName="day" maxlength="2" placeholder="DD" type="text" (keyup)="keytab($event)" />
<input formControlName="month" maxlength="2" placeholder="MM" type="text" (keyup)="keytab($event)" />
<input formControlName="year" maxlength="4" placeholder="YYYY" type="text" />
在我的 TS 文件中：
keytab(event){
let nextInput = event.srcElement.nextElementSibling; // get the sibling element
var target = event.target || event.srcElement;
var id = target.id
console.log(id.maxlength); // prints undefined
if(nextInput == null) // check the maxLength from here
return;
else
nextInput.focus(); // focus if not null
}
我知道我的 TS 文件中的代码是错误的，但我试图找到一种获取 maxLength 属性然后转移焦点的方法。现在，只要输入字段中有键，焦点就会移动。
谁能告诉我如何从 keytab 函数访问输入 maxLength …
我在一个名为“pointsBalance”的页面上有一个显示数值的表达式。它连接到一个observable，当 pointsBalance 值上升时，我想将颜色更改为绿色，然后返回其原始颜色，如果值下降，则为红色。我以为我可以使用Angular 5 的新动画别名:increment 和 :decrement但我一直遇到问题。
显示积分余额的 HTML：
<div [@valueAnimation]="pointsBalance">{{ pointsBalance }}</div>
设置动画和可观察的 pointsBalance 的代码：
import { Component, OnInit, Input } from '@angular/core';
import { trigger, style, transition, animate, keyframes, query,
stagger, state, group } from '@angular/animations';
import { CompetitionsService } from "../../../shared/index";
@Component({
selector: 'points',
templateUrl: './...html',
animations: [
trigger('valueAnimation', [
transition(':increment', group([
query(':enter', [
style({ color: 'green', fontSize: '50px' }),
animate('0.8s ease-out', style('*'))
])
])),
transition(':decrement', group([
query(':enter', [
style({ color: …我有一些JSON,我在角度转发器中显示.我需要将结果分组到转发器中,并且我看起来似乎没有用
使用这个JSON ......
{
"Products":[
{
"Code":"ELA-67",
"Site":"SITE1",
"Attributes":{
"Term":"36",
"quantity":1
}
},
{
"Code":"ELI-45",
"Site":"SITE2",
"Attributes":{
"Term":"36",
"quantity":1
}
},
{
"Code":"COA-56",
"Site":"SITE1",
"Attributes":{
"Term":"36",
"quantity":1
}
},
{
"Code":"COY-67",
"Site":"SITE2",
"Attributes":{
"Term":"36",
"quantity":1
}
}
]}
我想创建这个布局
SITE1
SITE2
我试图使用groupBy函数...
<div ng-repeat="Products in productAttributes.Products | groupBy: 'Products.Code'>
Product name: {{Products.Code}}
Site location: {{Products.Site}}
</div>
但我在下面得到一个错误...
错误:错误:unpr未知提供者未知提供者:groupByFilterProvider
有任何想法吗？
我在一个似乎无法正常工作的bootstrap popover中进行了一次点击.当我将它从弹出窗口移到页面中时,它似乎有效.此外,ng-model值似乎也没有更新.
<div id="popover-content" class="hide">
<input type="text" placeholder="Quote ID" ng-model="selectedItems.quote.label">
<button type="button" ng-click="newQuote()">New quote</button>
</div>
这是因为在dom中创建了popover并且angular不知道它存在吗？任何想法我怎么能让它工作？谢谢
编辑:
这是newQuote
$scope.newQuote = function() {
$scope.selectedItems.quote = angular.copy(defaultQuote);
$scope.solution.quotes.push($scope.selectedItems.quote);
$scope.selectedItems.quote.label = 'New Quote';
$scope.addMessage('Quote created successfully', 2);
};
编辑2
这是一个显示问题的plunker - 当ng-click ="newQuote()"被触发时,不显示警报 http://plnkr.co/edit/ANH98vlflPK9c5qA3ohO?p=preview
有没有办法在用户使用 Angular 验证器输入出生日期时检查用户是否已年满 18 岁？
我的表格如下所示：
<form [formGroup]="authForm" (ngSubmit)="submitForm()">
<label>Date of birth</label>
<input formControlName="day" maxlength="2" placeholder="DD" type="text" />
<input formControlName="month" maxlength="2" placeholder="MM" type="text" />
<input formControlName="year" maxlength="4" placeholder="YYYY" type="text" />
<button [disabled]="!authForm.valid" type="submit"> Check age </button>
</form>
然后我在 TS 文件中设置这些验证器：
if (this.authType === 'register') {
this.authForm.addControl('year', new FormControl('', [Validators.required, Validators.maxLength(4), Validators.minLength(4)]));
this.authForm.addControl('month', new FormControl('', [Validators.required, Validators.maxLength(2)]));
this.authForm.addControl('day', new FormControl('', [Validators.required, Validators.maxLength(2)]));
}
因此，如果验证器中满足上述条件，则该按钮将启用。但我还需要在启用之前检查输入的日期是否超过 18 岁。这看起来很棘手，因为日期是通过 3 个输入（dd、mm、yyyy）输入的。在这种情况下，我无法使用输入日期标签。任何建议或意见表示赞赏。谢谢！
PS 感谢您对使用 MomentJS 的所有建议。我已经在应用程序的其他地方使用它，所以我也会在这里使用它。
我正在使用Angular UI手风琴,我正在尝试添加一个切换按钮,它将展开和折叠面板.目前,只有当用户点击标题时,面板才会打开.我添加的按钮将变量'isopen'切换为true或false,但它似乎不起作用.
这是我的代码:
<button ng-click="isopen =!isopen">expand/collapse</button> {{isopen}}
<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="site in groups">
<accordion-heading ng-click="isopen = !isopen">
hey {{isopen}}
</accordion-heading>
hello
</accordion-group>
</accordion>
这是一个吸烟者:
http://plnkr.co/edit/8AkWUxzOir5NNoA0fT5R?p=preview
当用户点击面板标题时,它应该只打开该面板.切换按钮有望扩展并折叠它们.
有谁知道是否可以将for循环放入jquery模板？
例如，如果我有类似${userCap}userCap的值是10的东西，当我小于userCap时，如何在模板中添加for循环以将选项添加到选择中？
<select>
{{for(i=1; i<=userCap; i++)}}
<option value="${i}">${i}</option>
{{/for }}
</select>
根据Bergi的要求-我正在使用的插件是... jQuery模板https://github.com/BorisMoore/jquery-tmpl
是否有可能通过Moment.js得到一个数字的序数？例如,如果我传入数字7并且Momentjs将返回'7th'
到目前为止,我已经尝试了所有这些但没有一个有效
console.log(moment("12", "D Do")); // returns n {_isAMomentObject: true, _i: "12", _f: "D Do", _isUTC: false, _pf: Object…}
console.log(moment("3", "D Do")); // returns n {_isAMomentObject: true, _i: "3", _f: "D Do", _isUTC: false, _pf: Object…}
console.log(moment(3).format("D Do")); // returns '1 1st'
console.log(moment('3').format("D Do")); // returns '1 1st'
console.log(moment().day('3').format("Do")); // returns '9th'
console.log(moment().day(3).format("D Do")); // returns '9 9th'
编辑:我应该提到我正在尝试处理日期.所以我得到的格式是DD-MM-YYYY格式.因此,如果日期是2015年12月7日,我想将其显示为第7个.
我有一个带按钮的组件.单击该按钮时,它会调用两个后端服务之一.调用的服务取决于组件的使用位置.到目前为止,我正在向组件控制器传递一个标志,就像这样......
<run-report is-wizard="true" </run-report>
isWizard: '<'在component.js文件中使用,然后我在按钮的单击事件中有以下代码run-report...
run() {
if (this.running) {
return;
}
this.running = true;
//prepare the details for the report
const reportDetails = this.prepareReportData({
name: this.reportName,
settings: this.mapSettings(this.selectedSettings),
});
if (this.isWizard) {
return this.BackendService
.postWizardReport(reportDetails)
.then(response => {
//do stuff
})
.finally(() => {
this.running = false;
});
} else {
return this.BackendService
.postMainReport(reportDetails)
.then(response => {
//do stuff
})
.finally(() => {
this.running = false;
});
}
}
我不这样做,因为我正在重复代码.有谁能建议更好的方法？谢谢
javascript ×6
angular ×4
angularjs ×4
momentjs ×2
date ×1
jasmine ×1
jquery ×1
json ×1
reactjs ×1
reactjs-flux ×1
typescript ×1
unit-testing ×1
validation ×1
websocket ×1