Question

我刚刚开始学习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”这样的任意参数，但是我得到了同样的错误

Answer 1

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

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

URL中未定义参数

1 个答案: