Angular2 为什么使用异步管道

Question

I understand the Async pipe works on observable and help us load thing async for data which will be coming later.

However I can work without using async too. Following is the code

Component

export class XComponent{
     someProp: string;
     someList: string[];
     someFn(){
          this.someService.subscribe(
               data=>{
                    this.someProp = data.prop; 
                    this.someList = data.list;
               }
          );
     }
}

Template

.....

<label>Prop</label>
<span>{{someProp}}</span>
<label>List</label>
<span *ngFor="let item of someList">{{item}}</span>

Above code works for me without use of async and without any issue. They why should I use async? Is it because we don't need to declare a variable for data and we can use directly observable (We anyways needs to declare a observable instead of data though)?

EDIT

Following is the code taken from angular docs for async example

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Subscriber<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

Instead of that I can write

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time }}</div>'
})
export class AsyncObservablePipeComponent {
  time;
  constructor(){
    setInterval(() => time = new Date().toString(), 1000); 
  } 
}

To me second code looks clean too. (Even cleaner)

Answer 1

What : With AsyncPipe we can use promises and observables directly in our template, without having to store the result on an intermediate property or variable

Why :Normally to render result of promise or observable we have to do

1. Wait for a callback.

2. Store the result of the callback is a variable.

3. Bind to that variable in the template.

async makes rendering data easier from promises and observables. Suppose if we use observables without async, we have to subscribe the data from observable and we need to unsubscribe that on ngdestroy hook to avoid memory leaks.but where as with async will take care of this automatically.

"The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes"

How

`@Component( 
{

selector: 'async-observ',

  template: `
 <div>
  <h5>Async demo</h5>
  <p>{{ observable | async }}</p> 
 </div>
})

class AsyncObservComponent {

    observable: Observable<number>;

    constructor() {

     this.observable = this.getObservable();

   }

  getObservable() {

    return Observable
      .interval(1000)
      .take(5)
      .map((v) => v*v)
   }

Answer 2

The main reason is because using an async pipe, your code will be much cleaner.

Imagine a case where the data returned consists of tens or hundreds of keys instead of two. It would be too cumbersome to set all the inner variables.

As an addition, according to the Angular docs , the AsyncPipe will only take the last value omitted by the observable (which is the perfect solution to show a value in the view). If you keep trace of the observable itself in the XComponent , you are then capable of getting all of the values, first values and do all sorts of data manipulation.

EDIT: To support the new example you gave:

time = Observable.interval(1000).flatMap(() => new Date().toString());

Answer 3

You have to subscribe to observables to return their data. Instead of subscribing manually, you can use the async pipe in your HTML file. This will subscribe to the observable, return dynamic values, and unsubscribe the observable on component changes.

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Subscriber<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}