缺少属性 @ViewChildren

Question

我是Angular的初学者，想得到一些帮助，解决了一个问题，明白了根源，但我不知道如何解决。所以我想得到一些帮助。首先，这是我的 scr 文件夹的图片：

我的错误位于我的 upgrade.component.ts，即：

export class UpgradeComponent implements OnInit {
  canclose=false;
  @Input() upgrade: Pallier[];
  server = "http://localhost:8080/";
  @Input() world: World;
  @Input() money: number;

  @Output() closemodalevent = new EventEmitter<void>();

  constructor(private snackBar: MatSnackBar, private service: RestserviceService) { 

  }

  ngOnInit(): void {
  }
  popMessage(message: string) : void {
    this.snackBar.open(message, "", {duration : 2000});
  }

  closemodal(){
    if(this.canclose){
      this.closemodalevent.emit();
    }else{
      this.canclose=true;
    }
  }

  purchaseUpgrade(p: Pallier) {
    if (this.world.money > p.seuil) {
      this.world.money = this.world.money - p.seuil;
      this.world.upgrades.pallier[this.world.upgrades.pallier.indexOf(p)].unlocked = true;
      this.popMessage("Achat d'une upgrade de" +p.typeratio);
      if (p.idcible == 0) {
        this.productsComponent.forEach(prod => prod.calcUpgrade(p));
        this.popMessage("Achat d'une upgrade de ");
      }
      else {
        this.productsComponent.forEach(prod => {
          if (p.idcible == prod.product.id) {
            prod.calcUpgrade(p);
            this.popMessage("Achat d'une upgrade de " +p.typeratio);
          }
        })
      }
      this.service.putUpgrade(p);
    }
  }
}

错误很简单：

属性 'productsComponent' 在类型 'UpgradeComponent' 上不存在。

问题不是这个属性位于 app.component.ts，而是 @ViewChildren.Here 是我的 app.component.ts:

export class AppComponent {
  @ViewChildren(ProductComponent) public productsComponent: QueryList<ProductComponent>;
  title = 'AngularProject';
  world: World = new World();
  server: String;
  username: string;
  qtmulti = "x1";
  modal: string=null;

  constructor(private service: RestserviceService, public snackBar: MatSnackBar) {
    this.server = service.getServer();
    this.username = localStorage.getItem("username");
    // Fonction créant un nom de joueur aléatoire si le nom du joueur est et qui sera sauverarder dans le serveur
    if (this.username == '') {
      this.username = 'Player' + Math.floor(Math.random() * 10000);
      localStorage.setItem("username", this.username);
    }
    this.service.setUser(this.username);
    service.getWorld().then(world => { this.world = world; });
  }

  popMessage(m: string) : void {
    this.snackBar.open(m, "", { duration: 2000 });
  }
}

我在网上绝对找不到任何东西，我不知道如何解决这个错误...

我提前感谢任何好心给我启发的人。

Answer 1

您正试图在 UpgradeComponent 中引用 ProductComponent。但你没有打电话 ProductComponent 在你的 UpgradeComponent 中。 UpgradeComponent 中的 this 将引用 UpgradeComponent 中声明的属性和方法。这就是您收到错误 Property 'productsComponent' does not exist on type 'UpgradeComponent'. 的原因。要访问其他组件数据，您可以使用 Input / Output decorator , Passing the reference of one component to another, service or @ViewChild/ @ViewChildren。此博客将帮助您 https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb

Answer 2

@ViewChildren 装饰器仅在您正在使用的组件内工作，并且它仅针对您在其 html 模板内调用的 html 组件找到。

export class AppComponent {
    @ViewChildren(ProductComponent) public productsComponent: QueryList<ProductComponent>;
}

然后在应用程序模板中

<product-component #p1></product-component>
<product-component #p2></product-component>
<product-component #p3></product-component>

在您的情况下，您应该在升级组件中声明 @ViewChildren，并在其 html 模板中将所有产品组件调用为 html 标记。

缺少属性 @ViewChildren

Missing property @ViewChildren

typescript

angular

angular9

缺少 属性 @ViewChildren

Missing property @ViewChildren

typescript

angular

angular9

缺少属性 @ViewChildren