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>

通过这种方式，子组件的参数名称为undefined。

然后我更改了子组件中的一些代码，它起作用了：

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

当父组件评估异构parem到子组件，并且此参数不是流时，如何解决它。有没有人有更好的方法来解决这个问题？谢谢！

Answer 1

试试这样：

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;
}

Answer 2

您可以使用带有运算符优先级的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>我使用大括号的方式，以确保首先处理异步管道。

这是一个有效的Blob演示

在Angular 4中访问异步对象参数到子组件

2 个答案: