我试图显示元素的二叉树,我用ng-include递归地进行.
ng-init="item = item.left"和之间有什么区别ng-repeat="item in item.left"?在这个例子中,它的行为完全相同,但我在项目中使用类似的代码,并且它的行为有所不同.我想这是因为Angular范围.也许我不应该使用ng-if,请解释我如何做得更好.
pane.html是:
<div ng-if="!isArray(item.left)">
<div ng-repeat="item in [item.left]" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.left)">
{{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
<div ng-repeat="item in [item.right]" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.right)">
{{item.right[0]}}
</div>
<div ng-if="!isArray(item.left)">
<div ng-init = "item = item.left" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.left)">
{{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
<div ng-init="item = item.right" ng-include="'Views/pane.html'">
</div>
</div>
<div ng-if="isArray(item.right)">
{{item.right[0]}}
</div>
Run Code Online (Sandbox Code Playgroud)
控制器是:
var app = angular.module('mycontrollers', []);
app.controller('MainCtrl', function ($scope) {
$scope.tree = {
left: {
left: …Run Code Online (Sandbox Code Playgroud) javascript angularjs angularjs-ng-repeat angularjs-ng-include angularjs-ng-init
我正在使用Angular2开始我的项目,开发人员似乎推荐RXJS Observable而不是Promises.
我已经实现从服务器检索元素列表(史诗).但是我如何通过使用例如id来过滤元素?
以下代码是从我的应用程序中提取的,现在显示最终的工作解决方案.让我们希望它有所帮助.
@Injectable()
export class EpicService {
private url = CONFIG.SERVER + '/app/'; // URL to web API
constructor(private http:Http) {}
private extractData(res:Response) {
let body = res.json();
return body;
}
getEpics():Observable<Epic[]> {
return this.http.get(this.url + "getEpics")
.map(this.extractData)
.catch(this.handleError);
}
getEpic(id:string): Observable<Epic> {
return this.getEpics()
.map(epics => epics.filter(epic => epic.id === id)[0]);
}
}
export class EpicComponent {
errorMessage:string;
epics:Epic[];
epic:Epic;
constructor(
private requirementService:EpicService) {
}
getEpics() {
this.requirementService.getEpics()
.subscribe(
epics => this.epics = epics,
error => this.errorMessage …Run Code Online (Sandbox Code Playgroud) 我只想将类的对象(Pixel)添加到数组中.
export class Pixel {
constructor(x: number, y: number) {}
}
Run Code Online (Sandbox Code Playgroud)
该类具有以下属性:
pixels: Pixel[] = [];
Run Code Online (Sandbox Code Playgroud)
以下代码对我来说看起来合乎逻辑,但不会将实际对象推送到我的数组像素.
this.pixels.push(new Pixel(x, y));
Run Code Online (Sandbox Code Playgroud)
只有这个有效:
var p = {x:x, y:y};
this.pixels.push(p);
Run Code Online (Sandbox Code Playgroud)
有人可以解释一下为什么上述说法不起作用?
我想使用RXJS Observable.基本上它工作正常,但我不仅需要在observer.next()时做出反应,而且在调用observer.complete()时也是如此.如何获得RXJS Observable的OnComplete事件?在我看来,RXJS文档令人困惑.
export class Service {
myMethod():Observable<any> {
return Observable.create((observer:any) => {
for(let i=0; i<10; i++) {
observer.next(i);
}
if(true==true) {
// this event I need
observer.complete();
} else {
observer.error(xhr.response);
}
}
}
export class Component() {
// constructor etc.
doSome() {
this.service.myMethod()
// Here I would like to get OnComplete event
.catch(this.handleError)
.subscribe((num:any) => {
console.log(num);
});
}
}
Run Code Online (Sandbox Code Playgroud) 在Chrome和Internet Explorer中,我的输入文件上传工作正常,但在Firefox中使用时出错.
从HTML模板中提取
<input multiple style="display: none" type="file" (change)="onChange($event)" accept="image/*"/>
Run Code Online (Sandbox Code Playgroud)
从组件类中提取
onChange(event: any) {
let files = event.srcElement.files;
....
}
Run Code Online (Sandbox Code Playgroud)
错误消息只是: TypeError:event.srcElement未定义
这是Firefox的错误吗?美元符号的含义是什么?
我想在路由器导航到目标组件期间传递对象。目前我正在使用routeParams 并将我的对象字符串化为字符串。这种方法有效,但我不喜欢这种解决方案。更好的解决方案是什么样的?
export class Overview {
//import {Router} from "@angular/router-deprecated";
constructor(private router:Router) {}
goToElementComponent(elem:Element) {
this.router.navigate(['ElementDetail', {elem: JSON.stringify(elem)}]);
}
}
export class ElementDetail {
// import {RouteParams, Router} from "@angular/router-deprecated";
this.elem : Element;
constructor(private routeParams:RouteParams) {}
ngOnInit() {
var elem = JSON.parse(this.routeParams.get("elem"));
if (elem) {
this.elem = elem;
} else {
this.elem = new Element();
}
}
}
Run Code Online (Sandbox Code Playgroud) 基本上标题已经说明了问题。我附上了代码摘录,它应该可以表达我的想法。
export class MyComponent {
constructor(private element: ElementRef, private myservice:MyService){}
onChange(event: any): void {
// works fine
var imageElem = this.element.nativeElement.querySelector('.image');
reader.onloadend = function() {
// works fine
console.log(imageElem)
// does not work
this.doSome(src);
// does not work
this.myservice.doSome();
}
reader.readAsDataURL(file);
}
doSome(src:string) {}
}
Run Code Online (Sandbox Code Playgroud) typescript ×6
angular ×5
javascript ×2
observable ×2
rxjs ×2
angularjs ×1
arrays ×1
events ×1
firefox ×1