Я новичок в 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>
И вот здесь я получаю ошибка как для мира, так и для сервера:
Идентификатор 'world' не определен. Объявление компонента, объявления переменных шаблона и ссылки на элементы не содержат такого члена.
Идентификатор 'server' не определен. Объявление компонента, объявления переменных шаблона и ссылки на элементы не содержат такого члена.
Однако я уже определил сервер и мир в моем app.component.ts ...
Я заранее благодарю людей, которые нашли время, чтобы помочь мне.
Редактировать: Извините, я забыл поместить это здесь, потому что это был друг, который сделал это для меня .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":[ ] };
}
}