Question

这是我的组件A的模板：

update Eruptions_since_2000 
set 
  Volcano_Number = (select e.Volcano_Number from Eruptions e, whereVolcano_name, e.Eruption_numberstart_date) = Eruptions_since_2000.Eruption_number),
  Volcano_name = (select e.Volcano_name from Eruptions e whereVolcano_Number, e.Eruption_number = Eruptions_since_2000.Eruption_number)Volcano_name,
  start_date = (select e.start_date from Eruptions e where e.Eruption_number = Eruptions_since_2000.Eruption_number)

我收到此错误：

ExpressionChangedAfterItHaHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：“ badgeText：null”。当前值：“ badgeText：0”

我了解此错误，但我不知道该怎么办。它涉及DOM <nb-tab tabTitle="Photos" [badgeText]="centerPictures?.pictures?.length" badgePosition="top right" badgeStatus="info"> <app-center-pictures #centerPictures [center]="center"></app-center-pictures> //Child component B </nb-tab> <nb-tab tabTitle="Facilities" [badgeText]="centerFacilities?.facilities?.length" badgePosition="top right" badgeStatus="info"> <app-club-facilities #centerFacilities [centerId]="center.id"></app-club-facilities> // Child component C </nb-tab> <nb-tab tabTitle="Prices" [badgeText]="centerPrices?.priceRules?.length" badgePosition="top right" badgeStatus="info"> <app-center-prices #centerPrices [currency]="center.currenciesAccepted"></app-center-prices> // Child component D </nb-tab>，而不是A的功能。谢谢

编辑：比较A

[badgeText]

组件B：

IMPORTS

@Component({
  selector: 'app-center-detail',
  templateUrl: './center-detail.component.html',
  providers: [CentersService, PictureService],
  styleUrls: ['center-detail.component.css']
})

export class CenterDetailComponent implements OnInit {

  @ViewChild ('centerPictures') centerPictures;

  get centerPicturesCount(): number {
      console.log(this.centerPictures);
      return this.centerPictures.pictures.length;
  }

  center: Center;
  errorMessage: string;
  success: string;
  edit: boolean = false;

  constructor(
    private centerService: CentersService,
    private route: ActivatedRoute,
    private pictureService: PictureService
  ) { }

  ngOnInit() {
    this.getCenter();
  }

  getCenter() {
    const id = this.route.snapshot.paramMap.get('id');
    this.centerService.getCenter(id)
      .subscribe(
        center => this.center = center,
        error => {
          if (error.status === 404) {
            this.errorMessage = "Center not found";
          }
          else {
            this.errorMessage = "An error has occured";
          }
        }
      );
  }

  processFile(image, type: string) {
    this.success = null;
    this.errorMessage = null;

    if (image.files.length) {
      let picture = new UploadPicture(image.files[0]);
      this.pictureService.addCenterPicture(this.center.id, picture.header(type))
        .subscribe(
          () => {
            this.getCenter();
            this.success = 'Header picture has been successfully changed !';
          },
          error => this.errorMessage = error.message
        )
    }
  }
}

Answer 1

首先将此代码添加到您的componentA.ts

@ViewChild ('centerPictures') centerPictures;

get centerPicturesCount(): number {
    return this.centerPictures.pictures.length;
}

并像这样修复您的模板：

<nb-tab tabTitle="Photos" [badgeText]="centerPicturesCount" badgePosition="top right" 
            badgeStatus="info">
              <app-center-pictures #centerPictures [center]="center"></app-center-pictures> //Child component B
</nb-tab>

Answer 2

您尝试一下。将此代码添加到子组件B

@Output() picturesCount: EventEmitter<number>;
constructor() {
    this.picturesCount = new EventEmitter<number>();
}
getCenterPictures() {
    this.pictureService.getCenterPictures(this.center.id)
      .subscribe(
        pictures => {
          this.picturesCount.emit(pictrues.length);
        },
        error => this.error = error.message
      );
}

和componentA：

public outPicturesCount: number = 0;
picturesCount(value: number) {
    this.outPicturesCount = value;
}

和模板：

<nb-tab tabTitle="Photos" [badgeText]="outPicturesCount" badgePosition="top right" 
            badgeStatus="info">
    <app-center-pictures (picturesCount)=picturesCount($event) #centerPictures [center]="center"></app-center-pictures> //Child component B
</nb-tab>

Answer 3

已解决（感谢Akai Crystal）

比较A：

public outPicturesCount: number = 0;
picturesCount(value: number) {
   this.outPicturesCount = value;
}

比较B：

@Output() picturesCount = new EventEmitter<number>();
getPictures() {
   .
   .
   .
   pictures => {
      this.pictures = pictures,
      this.picturesCount.emit(pictures.length);
   }

模板：

<nb-tab tabTitle="Photos" [badgeText]="outPicturesCount" badgePosition="top right" 
badgeStatus="info">
   <app-center-pictures (picturesCount)=picturesCount($event) #centerPictures 
   [center]="center"></app-center-pictures>
</nb-tab>

表达式已更改错误：绑定值在模板中更改

3 个答案: