无法从子组件访问值:未定义 - Angular 7
Can't access value from child component : Undefined - Angular 7
我想在组件之间传递一个值,以便从候选列表切换到另一个面板,我可以在其中编辑所选候选。
遗憾的是,当我尝试记录我在列表候选组件中初始化的候选时,我在我的编辑候选组件中收到此错误:错误类型错误:"this.listCandidateComponent is undefined"。
列表-candidate.component.html
<table class="table table-striped">
<tbody *ngFor="let candidate of candidates">
<td><h4>{{ candidate.id }}</h4></td>
<td><a class="btn btn-outline-warning btn-sm" style="margin: 1%"
(click)="getCandidateById(candidate.id)" role="button">Modifier</a>
</td>
</tbody>
</table>
列表-candidate.component.ts
@Component({
selector: 'app-list-candidate',
templateUrl: './list-candidate.component.html',
styleUrls: ['./list-candidate.component.scss']
})
export class ListCandidateComponent implements OnInit {
candidate: Candidate;
candidates: Candidate[];
ngOnInit() {
this.getCandidateList();
}
async getCandidateById(id: number) {
const headers = new HttpHeaders({
'Content-type': 'application/json; charset=utf-8',
Authorization: 'Bearer ' + this.cookie.get('access_token')
});
const options = {
headers
};
await this.httpClient.get(`${this.baseUrl}/${id}`, options)
.toPromise()
.then(
(response: Candidate) => {
console.log('GET request successful', response);
this.candidate = response;
},
(error) => {
console.log('GET error : ', error);
}
);
await this.router.navigate(['/candidates/edit']);
}
编辑-candidate.component.ts
@Component({
selector: 'app-edit-candidate',
templateUrl: './edit-candidate.component.html',
styleUrls: ['./edit-candidate.component.scss']
})
export class EditCandidateComponent implements OnInit, AfterViewInit {
candidate: Candidate;
@ViewChild(ListCandidateComponent) listCandidateComponent;
ngAfterViewInit() {
this.candidate = this.listCandidateComponent.candidate;
console.log(this.candidate);
}
ngOnInit() {
}
知道为什么吗?
您正在路由到编辑页面..
await this.router.navigate(['/candidates/edit']);
您不能在这种情况下使用 ViewChild。
您必须为您的 router.navigate 赞
添加参数
await this.router.navigate(['/candidates/edit'], { queryParams: { candidateId: id } });
并且在您的编辑组件中,您必须阅读 queryParams
id: any;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams
.subscribe(params => {
this.id = params['candidateId'];
});
}
现在只需在编辑组件中加载带有 id 的候选人即可完成:)
您将 Viewchild 放置在您的编辑组件中。如果你想用 viewchild 加载 List 组件,edit-candidate.component.html 中的任何地方都必须像
<app-list-candidate>
</app-list-candidate>
否则它将始终未定义,因为列表组件不是编辑组件的子组件。
希望对您有所帮助 - 抱歉,如果我误解了您的问题 (:
我想在组件之间传递一个值,以便从候选列表切换到另一个面板,我可以在其中编辑所选候选。
遗憾的是,当我尝试记录我在列表候选组件中初始化的候选时,我在我的编辑候选组件中收到此错误:错误类型错误:"this.listCandidateComponent is undefined"。
列表-candidate.component.html
<table class="table table-striped">
<tbody *ngFor="let candidate of candidates">
<td><h4>{{ candidate.id }}</h4></td>
<td><a class="btn btn-outline-warning btn-sm" style="margin: 1%"
(click)="getCandidateById(candidate.id)" role="button">Modifier</a>
</td>
</tbody>
</table>
列表-candidate.component.ts
@Component({
selector: 'app-list-candidate',
templateUrl: './list-candidate.component.html',
styleUrls: ['./list-candidate.component.scss']
})
export class ListCandidateComponent implements OnInit {
candidate: Candidate;
candidates: Candidate[];
ngOnInit() {
this.getCandidateList();
}
async getCandidateById(id: number) {
const headers = new HttpHeaders({
'Content-type': 'application/json; charset=utf-8',
Authorization: 'Bearer ' + this.cookie.get('access_token')
});
const options = {
headers
};
await this.httpClient.get(`${this.baseUrl}/${id}`, options)
.toPromise()
.then(
(response: Candidate) => {
console.log('GET request successful', response);
this.candidate = response;
},
(error) => {
console.log('GET error : ', error);
}
);
await this.router.navigate(['/candidates/edit']);
}
编辑-candidate.component.ts
@Component({
selector: 'app-edit-candidate',
templateUrl: './edit-candidate.component.html',
styleUrls: ['./edit-candidate.component.scss']
})
export class EditCandidateComponent implements OnInit, AfterViewInit {
candidate: Candidate;
@ViewChild(ListCandidateComponent) listCandidateComponent;
ngAfterViewInit() {
this.candidate = this.listCandidateComponent.candidate;
console.log(this.candidate);
}
ngOnInit() {
}
知道为什么吗?
您正在路由到编辑页面..
await this.router.navigate(['/candidates/edit']);
您不能在这种情况下使用 ViewChild。
您必须为您的 router.navigate 赞
添加参数await this.router.navigate(['/candidates/edit'], { queryParams: { candidateId: id } });
并且在您的编辑组件中,您必须阅读 queryParams
id: any;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams
.subscribe(params => {
this.id = params['candidateId'];
});
}
现在只需在编辑组件中加载带有 id 的候选人即可完成:)
您将 Viewchild 放置在您的编辑组件中。如果你想用 viewchild 加载 List 组件,edit-candidate.component.html 中的任何地方都必须像
<app-list-candidate>
</app-list-candidate>
否则它将始终未定义,因为列表组件不是编辑组件的子组件。
希望对您有所帮助 - 抱歉,如果我误解了您的问题 (: