小编Joh*_*nes的帖子

将参数传递给Angular ng-include

我试图显示元素的二叉树,我用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

49
推荐指数
3
解决办法
8万
查看次数

对RXJS Observable数组进行简单过滤

我正在使用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)

javascript observable rxjs typescript angular

35
推荐指数
3
解决办法
5万
查看次数

TypeScript使用push将Object添加到数组

我只想将类的对象(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)

有人可以解释一下为什么上述说法不起作用?

arrays typescript

18
推荐指数
1
解决办法
10万
查看次数

RXJS Observable doSomething onComplete

我想使用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)

observable rxjs typescript angular

10
推荐指数
1
解决办法
1万
查看次数

Angular2输入文件onChange事件在Firefox中不起作用

在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的错误吗?美元符号的含义是什么?

firefox events typescript angular

3
推荐指数
1
解决办法
1717
查看次数

在路由器导航期间传递对象

我想在路由器导航到目标组件期间传递对象。目前我正在使用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)

typescript angular2-routing angular

2
推荐指数
1
解决办法
2万
查看次数

从另一个方法的内部函数访问 Typescript 类方法或属性

基本上标题已经说明了问题。我附上了代码摘录,它应该可以表达我的想法。

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 angular

1
推荐指数
1
解决办法
821
查看次数