Недостающее свойство @ViewChildren - PullRequest
1 голос
/ 10 апреля 2020

Я новичок в Angular, и я хотел бы получить помощь по проблеме, которая понимает происхождение, но я не знаю, как решить. Поэтому я хотел бы получить помощь, пожалуйста. Прежде всего, вот изображение моей папки scr:

enter image description here

Мои ошибки находятся в моем 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'.

Проблема не в том, что это свойство находится в приложении. 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 });
  }
}

И я абсолютно не могу найти что-либо в Интернете, и я понятия не имею, как решить эту ошибку ...

Заранее благодарю всех, кто был бы достаточно любезен, чтобы осветить меня.

Ответы [ 2 ]

2 голосов
/ 10 апреля 2020

Декоратор @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 голосов
/ 10 апреля 2020

Вы пытаетесь сослаться ProductComponent внутри UpgradeComponent. Но вы не назвали ProductComponent в вашем UpgradeComponent. this в UpgradeComponent будет ссылаться на свойства и методы, которые объявлены в 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 способа связи между angular компонентами a1e3f3304ecb

...