angular4訪問子組件的異步objcet參數

Question

我有一個關於角度訪問異步對象參數的問題。

首先，此代碼的工作：

param$:Observable<string>(); 


<child [name]="param$ | async"></child> 

但當PARAM $的類型是這樣的

param$:Observalbe<object>(); 

對象，我不能用這種方式來訪問對象的值

<child [name]="param$.name | async"></child> 

子組件的參數名稱是異步值：

export class Parent{ 
    private parentname; 
    constuctor(http:HttpClient){ 
     http.get(...) 
     .subscribe(obj => { 
     this.parentname = obj.name; 
// parentname can get successfully 
    }) 
    } 
} 

export class Child{ 
    @Input name:string; 
} 

<child [name]="parentname"></child> 

通過這種方式，子組件的參數名稱是未定義的。

然後我在子組件改變了一些代碼，它的工作：

private _name:string; 
@Input() set name(value:string){ 
    this._name = value 
} 

當父組件評估異步parem到子組件，而這個參數是不是甲流，如何解決它。 沒有人有更好的方法來解決這個問題？謝謝！

Answer 1

您可以使用async管與運算符優先級其中bracket首先處理，同時還利用了?操作，以確保讀取觀察或異步任務我們對象不返回undefined，它打破了我們的流程，這意味着如果有一個對象讀取name字段，否則請離開它並繼續前進，下面的代碼應該可以幫助您更好地理解它。

export class App { 
    name:string; 
    asyncObject:{name:string}; 
    asyncObject2:Observable<{name:string}>; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}`; 
    this.asynchronous().subscribe((data)=>{ 
     this.asyncObject = data; 
    }); 

    this.asyncObject2 = this.asynchronous(); 
    } 

    asynchronous():Observable<{name:string}>{ 
    return Observable.create(observer => { 
    setTimeout(() => { 
     observer.next({name:'First Theo'}); 
     console.log("am done"); 
     observer.complete(); //to show we are done with our processing 
    }, 2000); 
    }); 
    } 
} 

這裏是模板文件

<div> 
     <h2>Hello {{name}}</h2> 
     Loading this async 
     <b> name: {{asyncObject?.name}}</b> 
     <br> 
     Loading for second async that's an observable 
     <b> name2: {{(asyncObject2 | async)?.name}}</b> 

    </div> 

遵守這條線<b> name2: {{(asyncObject2 | async)?.name}}</b>我用大括號來確保異步管道，首先處理的方式。

這裏是一個工作plnkr演示

Answer 2

嘗試這樣的：

export class Parent { 
    private parentname: string; 
    constructor(private http: Http) { 
     this.http.get(...) 
      .map(response => response.json()) 
      .subscribe(result => { 
       this.parentname = result.name; 
      }); 
    } 
} 

<child [name]="parentname"></child> 

export class Child { 
    @Input name: string; 
}