缺少属性@ViewChildren答案

【问题标题】：Missing property @ViewChildren缺少属性@ViewChildren
【发布时间】：2020-04-10 03:13:27
【问题描述】：

我是 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);
    }
  }
}

错误很简单：

“UpgradeComponent”类型上不存在属性“productsComponent”。

问题不在于这个属性位于app.component.ts，而是一个@ViewChildren。这是我的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 });
  }
}

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

我提前感谢任何愿意启发我的人。

【问题讨论】：

你为什么首先使用 ViewChildren？
为了让父母在我解锁时警告所有孩子（产品）
angular的版本是什么
@malbarmavi Angular 9
如果您的问题得到解决，请接受对您有帮助的答案。

标签： angular typescript angular9

【解决方案1】：

@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标签。

【讨论】：

【解决方案2】：

您试图在 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

【讨论】：