Question

我试图将从Web服务获得的值发送到另一个组件，但是问题是我在另一个组件中获得空值，同时我看到在执行控制台时该值存在。 log（）在当前组件中。

AppComponent

ts

level: string = '';

getCustomer(id: string) {
    this.isLoading = true;

        this.customerService.getOne(id)
            .subscribe(
                (data) => {
                    this.level = data.level;
                    console.log(this.level); // Here I can see the value
                },
                (error) => {
                    this.errorMessage = error;
                },
            );
      }

html

    <div class="col-lg-8">
      <app-other-component [active]="level"></app-other-component> 
    </div>

AppOtherComponent

ts

@Input() active: string;

ngOnInit() {
    console.log(this.active); // Here I'm getting an empty string
  }

我认为这一行正在执行<app-other-component [active]="level"></app-other-component>，甚至没有填满'level'的值。

我该如何解决？谢谢。

Answer 1

如果您不希望在通过Web服务设置值之前看到*ngIf，请尝试将div包装在app-other-component中：

<div class="col-lg-8" *ngIf="level">
  <app-other-component [active]="level"></app-other-component> 
</div>

是的，正如Yousef建议的那样，您将在@Input中获得更新后的ngOnChanges值，而在ngOnInit中则不会得到。 ngOnChanges是每当其@Input属性之一更改时就在组件上调用的函数。因此，您将在那里获得更新的@Input属性：

@Input() active: string;

ngOnChanges() {
  console.log(this.active); // Here You'll get the updated `active` string.
}

Answer 2

我猜这是因为回调函数中的“ this”指针（不指向组件）。像这样将其更改为“自我”

let self = this;
this.customerService.getOne
...
(data) => { self.level = data.level; }

Angular：如何在传递给其他组件的html中获取价值？

2 个答案: