未定義標識符

Question

我是 Angular 9 的初學者，我正在嘗試創建一個應用程序。 但是我有一些關於屬性定義的小問題。 我希望有人會好心地幫助我。 首先，我的項目是這樣的：

我的 app.component.html 被定向到我的管理器文件夾：

<button mat-raised-button id="Upgrade (click)="modal='Managers'">Managers</button>
<app-manager *ngIf="modal=='Managers'" (closemodalevent)="modal=null" [manager]="world.managers.pallier"></app-manager>

我的 app.component.ts：

import { Component, Input } from '@angular/core';
import { RestserviceService } from './restservice.service';
import { World, Product, Pallier } from './world';
import { MatDialogConfig, MatDialog } from '@angular/material/dialog';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  products = [
    {logo: "./assets/Avatar.jpg" },
    {logo: "./assets/Avatar.jpg" },
    {logo: "./assets/Avatar.jpg" },
    {logo: "./assets/Avatar.jpg" },
    {logo: "./assets/Avatar.jpg" },
    {logo: "./assets/Avatar.jpg" }
  ];
  title = 'AngularProject';
  world: World = new World();
  server: String;
  qtmulti: number = 1;
  modal: string=null;

  constructor(private service: RestserviceService) {
    this.server = service.getServer();
    service.getWorld().then(world => { this.world = world; });
  }
}

我的 manager.component.html：

<div class="Modal" (clickOutside)="closemodal()">
  <div><h1 class="ManagerTitle">Managers make you feel better !</h1></div>
  <div>
    <div *ngFor="let manager of world.managers.pallier">
      <div *ngIf="!manager.unlocked" class="ManagerLayout">
        <div>
          <div class="logo"><img class="LogoImage" [attr.src]="server+manager.logo"></div>
        </div>
        <div>
          <div class="ManagerName">{{manager.name}}</div>
          <div class="ManagerCible">{{world.products.product[manager.idcible-1].name}}</div>
        </div>
        <div class="ManagerCost">{{manager.seuil}}</div>
      </div>
      <button mat-raised-button id="HireButton" (click)="hireManager(manager)"
              [ngClass]="{'selectable': (world.money >= manager.seuil)}"> Hire !</button>
    </div>
  </div>
</div>

正是在這里，我在世界和服務器上都遇到了錯誤，即：

未定義標識符“世界”。 組件聲明、模板變量聲明和元素引用不包含這樣的成員。

未定義標識符“服務器”。 組件聲明、模板變量聲明和元素引用不包含這樣的成員。

但是我已經在我的 app.component.ts 中定義了服務器和世界...

我提前感謝願意花時間幫助我的人。

編輯：對不起，我忘了把它放在這里，因為它是一個朋友為我做的 that.ts

我的 manager.component.ts：

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { World, Pallier } from '../world';

@Component({
  selector: 'app-manager',
  templateUrl: './manager.component.html',
  styleUrls: ['./manager.component.css']
})
export class ManagerComponent implements OnInit {
  canclose=false;
  @Input() manager: Pallier[];

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

  constructor() { }

  ngOnInit(): void {
  }

  hireManager(manager : Pallier){
    alert(manager.name + 'has been hired')
    if (this.world.money >= manager.seuil) {
      this.world.money = this.world.money - manager.seuil;
      this.world.managers.pallier[this.world.managers.pallier.indexOf(manager)].unlocked = true;
      this.world.products.product.forEach(element => {if (manager.idcible == element.id) {this.world.products.product[this.world.products.product.indexOf(element)].managerUnlocked = true;}});
    }
  }

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

我的世界.ts：

export class World {
    name : string; 
    logo : string;
    money: number; 
    score: number; 
    totalangels: number;
    activeangels: number;
    angelbonus: number;
    lastupdate: string; 
    products : { "product": Product[] };
    allunlocks: { "pallier": Pallier[]};
    upgrades: { "pallier": Pallier[]};
    angelupgrades: { "pallier": Pallier[]};
    managers: { "pallier": Pallier[]};

    constructor() {
        this.products = { "product":[ ] } ;
        this.managers = { "pallier":[ ] };
        this.upgrades = { "pallier":[ ] };
        this.angelupgrades = { "pallier":[ ] };
        this.allunlocks = { "pallier":[ ] };
    }
}

Answer 1

直接在模板中查看注釋。

<div class="Modal" (clickOutside)="closemodal()">
  <div><h1 class="ManagerTitle">Managers make you feel better !</h1></div>
  <div>

    <!-- world should be a property of manager.component.ts-->
    <div *ngFor="let manager of world.managers.pallier">

      <div *ngIf="!manager.unlocked" class="ManagerLayout">
        <div>

          <!-- put server inside single quotes -->
          <div class="logo"><img class="LogoImage" [attr.src]="'server'+manager.logo"></div>

        </div>
        <div>
          <div class="ManagerName">{{manager.name}}</div>
          <div class="ManagerCible">{{world.products.product[manager.idcible-1].name}}</div>
        </div>
        <div class="ManagerCost">{{manager.seuil}}</div>
      </div>
      <button mat-raised-button id="HireButton" (click)="hireManager(manager)"
              [ngClass]="{'selectable': (world.money >= manager.seuil)}"> Hire !</button>
    </div>
  </div>
</div>

此外，在模板中使用可選鏈接是一個很好的做法。

代替：

<div class="ManagerCible">
  {{world.products.product[manager.idcible-1].name}}
</div>

利用：

<div class="ManagerCible">
  {{world?.products?.product[manager.idcible-1]?.name}}
</div>

問號將保護您的代碼免受null值的影響（想象world是null / undefined .... 您會收到一條錯誤消息，指出您無法訪問undefined的products 。問號避免了此錯誤）。

Answer 2

看着你的 app.component.html，你有這條線

<app-manager *ngIf="modal=='Managers'" (closemodalevent)="modal=null" [manager]="world.managers.pallier"></app-manager>

假設你的 manager.component.ts 期望這個輸入，這意味着將傳遞給組件的值是world.managers.pallier中的解析值

查看您的代碼，我希望在您的 manager.component.ts 中有類似的內容

  @Input() manager: []CustomType;

這是為了使值匹配這意味着在您的 manager.component.html 您應該迭代管理器，就像這樣

<div class="Modal" (clickOutside)="closemodal()">
  <div><h1 class="ManagerTitle">Managers make you feel better !</h1></div>
  <div>
    <div *ngFor="let singleManager of manager">
      <div *ngIf="!singleManager.unlocked" class="ManagerLayout">
        <div>
          <div class="logo"><img class="LogoImage" 
           [attr.src]="server+singleManager.logo"></div>
        </div>
        <div>
          <div class="ManagerName">{{singleManager.name}}</div>
          <div class="ManagerCible">{{world.products.product[singleManager.idcible- 
           1].name}}</div>
        </div>
        <div class="ManagerCost">{{singleManager.seuil}}</div>
      </div>
      <button mat-raised-button id="HireButton" (click)="hireManager(singleManager)"
              [ngClass]="{'selectable': (world.money >= singleManager.seuil)}"> Hire !</button>
    </div>
  </div>
</div>

為了訪問子組件中的服務器，您還需要傳遞 app.component 中的值

<app-manager *ngIf="modal=='Managers'" (closemodalevent)="modal=null" [manager]="world.managers.pallier" [server]="server"></app-manager>

你的 manager.component.ts 也應該期待這個輸入，所以添加這一行@Input() server: String;

應該管用

另外，請查看組件通信文檔以正確理解此邏輯的工作原理