URL中未定义参数

时间:2019-07-18 12:03:22

标签: angular typescript

我刚刚开始学习Angular,但我对第一个应用程序迷失了。 我希望将ID传递给子组件,以便其执行对API的请求以检索数据。

这是我的代码:

子组件:

@Component({
  selector: 'app-set-content',
  templateUrl: './set-content.component.html',
  styleUrls: ['./set-content.component.css']
})
export class SetContentComponent implements OnInit {
  @Input() setId;
  equipments;

  constructor(
    private http: HttpClient
  ) {
    this.equipments = this.http.get('https://myapi.com/sets/'+this.setId+'/details')
   }

  ngOnInit() {
  }

}

父组件的HTML代码:

<div class="card" *ngFor="let set of sets | async">
    <div class="card-header">
            {{ set.name }}
    </div>

    <div class="card-block">
        <div class="card-text">
                <app-set-content [setId]="set._id">
                </app-set-content>
        </div>
    </div>

</div>

但是,在我的浏览器控制台中,我看到传递给子组件的ID是“未定义”。

GET https://myapi.com/sets/undefined/details 400 (Bad Request)

我试图传递一个像“ 1”这样的任意参数,但是我得到了同样的错误

1 个答案:

答案 0 :(得分:0)

尝试使用ngOnInit方法进行调用,因为@Input参数将被初始化为称为ngOnInit的ligecycle:

ngOnInit() {
    this.equipments = this.http.get('https://myapi.com/sets/'+this.setId+'/details')
}