我试图在应用程序中的另一个组件内显示来自小部件的一些数据。我创建了 html 小部件文件和 ts 文件，我想显示该组件，但我得到的只是带有文字的卡片，而不是来自公共数据的数字。 控制台没有显示任何问题，除了单击“TypeError：无法读取未定义的属性‘length’”后的长度属性错误，但我不认为这是它不起作用的原因。 我做错了什么？

小部件 html 文件

<mdb-card (click)='toggle()'>

    <h4>Revenue</h4>
    <p>Actual {{item?.revenue.actual}} $<br>
      Change {{item?.revenue.change}} %</p>

  </mdb-card>

小部件 ts 文件

export class DsWidgetComponent implements OnInit, OnChanges {
  public swiperconfig: SwiperConfigInterface = {
    observer: true,
    a11y: true,
    direction: 'horizontal',
    speed: 200,
    effect: 'slide',
    coverflowEffect: {
        slideShadows: false,
        depth: 0,
        rotate: 30
    },
    init: true,
    loop: false,
    freeMode: true,
    resistance: true,
    resistanceRatio: 0,
    spaceBetween: 15,
    slidesPerView: 1,
    keyboard: true,
    mousewheel: true,
    nested: true,

};

    @Input() public item;
    public record = 0;
    ngOnChanges() {
    }
    ngOnInit() {

    }



    public toggle(): void {
      this.record = this.record >= this.item.length - 1 ? 0 : this.record + 1;
  }

}

您想要在其中使用来自小部件的信息的组件 html 文件

<div class="container-fluid" *ngIf="data?.length > 0">
  <swiper #swiper [config]="swiperconfig">
      <ng-container *ngFor="let item of data;">
          <div class="swiper-slide ">
              <app-ds-widget-component
                      #card
                     [data]="{data:item}"

              >
            </app-ds-widget-component>

          </div>
      </ng-container>

  </swiper>

</div>

它的 ts 文件

export class DashboardComponent {



    constructor(
      public loginService: LoginService,
      private route: ActivatedRoute,
      private riotService: RiotService,
      private sg: SimpleGlobal,
      private translate: TranslateService,
      private applicationRef: ApplicationRef,
      private router: Router,
      private dictionaryService: DictionaryService,
      private cookieService: CookieService,
      private functionService: FunctionService,
      public idle: Idle
  ) {
  }

    public data =
        [
            {'revenue': {'actual': '123', 'change': '25 '},},

            {'revenue': {'actual': '23 ', 'change': '23 '},},

            {'revenue': {'actual': '43 ', 'change': '12 '},},

        ];

        public swiperconfig: SwiperConfigInterface = {
          observer: true,
          a11y: true,
          direction: 'horizontal',
          speed: 200,
          effect: 'slide',
          coverflowEffect: {
              slideShadows: false,
              depth: 0,
              rotate: 30
          },
          init: true,
          loop: false,
          freeMode: true,
          resistance: true,
          resistanceRatio: 0,
          spaceBetween: 15,
          slidesPerView: 1,
          keyboard: true,
          mousewheel: true,
          nested: true,
          freeModeSticky : true
      };


    public record = 0;



    ngOnInit() {

    }

    ngOnDestroy() {
    }
    public toggle(): void {
        this.record = this.record >= this.data.length - 1 ? 0 : this.record + 1;
    }
}