Не удается получить доступ к значению от дочернего компонента: Undefined - Angular 7 - PullRequest
Новая
       15

Не удается получить доступ к значению от дочернего компонента: Undefined - Angular 7

0 голосов
/ 02 мая 2019

Я хочу передать значение между компонентами, чтобы переключиться из списка кандидатов на другую панель, где я могу редактировать выбранного кандидата.

К сожалению, я получаю эту ошибку: ОШИБКА TypeError: "this.listCandidateComponent не определен "в моем компоненте редактировать-кандидата, когда я пытаюсь зарегистрировать кандидата, инициализированного в компоненте-кандидате.

список-кандидатов.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>

списоккандидат.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']);
   }

edit-candid.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() {
  }

Есть идеи, почему?

1 Ответ

0 голосов
/ 02 мая 2019

Вы направляетесь на страницу редактирования. 

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'];
  });

}

Теперь просто загрузите вашего кандидата с идентификатором в компоненте редактирования, и вызакончено:)

Вы поместили Viewchild в свой компонент редактирования.Если вы хотите загрузить компонент List с помощью viewchild, в любом месте файла edit-candid.component.html должно быть что-то вроде

<app-list-candidate> </app-list-candidate>

, иначе он всегда будет неопределенным, поскольку компонент списка не являетсядочерний компонент редактирования.

Надеюсь, это поможет - извините, если я неправильно понял вашу проблему (:

...