Question

我正在尝试从应用程序另一个组件内的小部件中显示一些数据。我创建了html小部件文件和ts文件，我想显示它的组件，但我得到的只是带有单词的卡片，而不是带有来自公共数据的数字的卡片。单击“ TypeError：无法读取未定义的属性'length'的属性”后，控制台没有显示任何问题，但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;
    }
}

Answer 1

我有点困惑。您使用let item做ngFor：

  <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>

您调用属性data，并将其放在组件ds-widget-component中。但是然后您使用{data:item}而不是item。在小部件中，您再次将其声明为item，但之前将其声明为data。也许我弄错了，但是...

应该是：

[item]="item"

widget.ts内部：

@Input() item;

内部widget.html

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

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

  </mdb-card>

Answer 2

只需从以下位置更改您的 html ：

 [data]="{data:item}"

收件人：

 [item]="item"

和您的 ts 来自：

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

收件人：

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

显示数据不显示任何内容

2 个答案: