Как передать API, возвращающий значения массива данных из родительского компонента в дочерний компонент в Angular - PullRequest
Новая
       7

Как передать API, возвращающий значения массива данных из родительского компонента в дочерний компонент в Angular

0 голосов
/ 17 апреля 2020

Здесь я хочу передать значения массива this.bookingInfo = bookings.responseObj.txnValues; this.bookingInfo из родительского компонента в массив bookingInfo в моем дочернем компоненте. И я хочу поместить эти данные в массив chartNameChartTTV.data = []; в дочернем компоненте. Здесь divName будет обращаться к html файлу am4core.create('divName', am4charts.XYChart);, а не к массиву bookingInfo.

Это мой родительский компонент. 

@Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.scss']
    })
    export class DashboardComponent implements OnInit{

      bookingInfo = [];
      ngOnInit() {
       this.getBookingInfo();
      }

      getBookingInfo() {
          const params = [];
          params.push({code: 'dateType', name: 'BOOKING'});
          params.push({code: 'fromDate', name: '2019-01-01'});
          params.push({code: 'toDate', name: '2019-12-31'});

          this.ServiceHandler.getTxnInfo([], params).subscribe(
            bookings => {
              this.bookingInfo = bookings.responseObj.txnValues;
              console.log(this.bookingInfo);
          });
      }
    }

Это мой дочерний компонент. 

@Component({
  selector: 'app-summary-chips',
  templateUrl: './summary-chips.component.html',
  styleUrls: ['./summary-chips.component.scss']
})
export class SummaryChipsComponent implements OnInit {

  @Input() bookingInfo: [];
  ngOnInit() {

     console.log(this.bookingInfo);
  }

   createSummaryChips(  divName: string, chartDataInfo: [], chartValue: any, chartDate: any) {

    am4core.useTheme(am4themesAnimated);

    const chartNameChartTTV = am4core.create('divName', am4charts.XYChart);

    chartNameChartTTV.width = am4core.percent(100);
    chartNameChartTTV.height = am4core.percent(100);
    chartNameChartTTV.padding(0, 0, 0, 0);
    chartNameChartTTV.data = [];
   }

}

Это мой класс обслуживания. 

@Injectable({
  providedIn: 'root'
})
export class ServiceHandler {
  getTxnInfo(headers: any[], params: any[]) {
    return this.apiService.get( 'analytics-api/dashboard/txn-info', headers, params);
  }
}

Но когда я пытаюсь console.log(this.bookingInfo); в дочернем компоненте, он показывает ошибку вроде undefined Это мой dashboard.component. html file 

   <div class="l-content-wrapper c-summary-chip oh" >
          <div class="c-summary-chip__txt">Cancellations</div>
          <div id="divName" class="c-summary-chip__graph ">
          </div>
    </div>

Но я хочу поместить этот блок кода в summary-chips.component. html и вставить в
dashboard.component. html файл, подобный этому 

 <div class="l-content-wrapper c-summary-chip oh" style="visibility: hidden">
           <app-summary-chips></app-summary-chips>
    </div>

1 Ответ

0 голосов
/ 18 апреля 2020

Вам просто не хватает вставить свою информацию booking от информационной панели до ввода app-summary-chips

в html компонента вашей панели: 

<div class="l-content-wrapper c-summary-chip oh" style="visibility: hidden">
     <app-summary-chips [bookingInfo]='bookingInfo'></app-summary-chips>
</div>
...