0
Je viens de déplacer mes données à partir de données simulées dans la mémoire et tout semblait aller bien, sauf maintenant quand je clique sur un bouton Cela devrait créer différents champs basés sur les données, ils apparaissent complètement vides.Les données de l'API en mémoire ne s'affichent pas au bon moment (pas au premier clic/chargement de la page)
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
// Import for loading in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
// Important mock data from in memory service
import { InMemoryDataService } from './in-memory-data.service';
import { AppComponent } from './app.component';
import { SimXesComponent} from './simxes.component';
import { SimXComponent } from './simx.component';
import { SimXDetailsComponent} from './simx-details.component';
import { SimXService } from './simx.service';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
SimXesComponent,
SimXComponent,
SimXDetailsComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule
],
providers: [
SimXService
],
bootstrap: [AppComponent]
})
export class AppModule { }
simx.component.html
<!-- SimutronX constructor: takes variables for creating a new Simutron instance -->
<h3>Create SimutronX</h3>
<form>
<label for="SimX title">SimutronX Title</label>
<input name="title" type="text" maxlength="2" placeholder="SimutronX" min="1" max="99"><br>
<label for="coefficients">Number of {{coefficients.title}}</label>
<input [(ngModel)]="coefficients.value" name="coefficients" type="number" maxlength="2" placeholder="1" min="1" max="99"><br>
<label for="constraints">Number of {{constraints.title}}</label>
<input [(ngModel)]="constraints.value" name="coefficients" type="number" maxlength="2" placeholder="1" min="1" max="99"><br>
<button (click)="inputNums()">Submit</button>
</form>
<form *ngIf="valuesinput">
<div>
<label>Coefficient titles:</label>
<li *ngFor="let slider of onedsliders">
<input [(ngModel)]="slider.name" [ngModelOptions]="{standalone: true}" type="text" size="30" placeholder="Profit" ><br>
</li>
<label>Coefficient values:</label>
<li *ngFor="let slider of onedsliders">
<input [(ngModel)]="slider.value" [ngModelOptions]="{standalone: true}" type="text" size="30" placeholder="0" ><br>
</li>
</div>
<div>
<label>Constraint titles:</label>
<li *ngFor="let slider of twodsliders">
<input [(ngModel)]="slider.name" [ngModelOptions]="{standalone: true}" type="text" size="30" placeholder="Product Volume"><br>
</li>
<label>Upper boundries (max value)</label>
<li *ngFor="let slider of twodsliders">
<input [(ngModel)]="slider.max_value" [ngModelOptions]="{standalone: true}" type="text" size="30" placeholder="Max Product" ><br>
</li>
<label>Lower boundries (min value)</label>
<li *ngFor="let slider of twodsliders">
<input [(ngModel)]="slider.min_value" [ngModelOptions]="{standalone: true}" type="text" size="30" placeholder="Existing Orders" ><br>
</li>
</div>
<div>
<label>Objective function title(s):</label>
<li *ngFor="let output of outputs">
<input [(ngModel)]="output.name" [ngModelOptions]="{standalone: true}" type="text" size="30" placeholder="Most Profit" ><br>
</li>
</div>
<button (click)="createSimX()">Create SimutronX</button>
<button (click)="createOneDSliders(5)">Test Button</button>
</form>
<!-- SimutronX instantiates here -->
<div *ngIf="simXcreated">
<ul class="coefficients">
<h3 class="header3" id="coefheader">{{coefficients.title}}</h3>
<li *ngFor="let slider of onedsliders">
<span class="onedslider">{{slider.id}}</span> {{slider.name}} = value: {{slider.value}}
</li>
</ul>
<ul class="constraints">
<h3 class="header3" id="consheader">{{constraints.title}}</h3>
<li *ngFor="let slider of twodsliders">
<span class="twodslider">{{slider.id}}</span> {{slider.name}} = top value: {{slider.max_value}}, bottom value: {{slider.min_value}}
</li>
</ul>
<ul class="minmaxes">
<h3 class="header3" id="minmaxheader">min/max</h3>
<li *ngFor="let switch of switches">
<span class="switch">{{switch.id}}</span> {{switch.name}} = state:
<span *ngIf="switch.onoff" class="on"> on</span>
<span *ngIf="!switch.onoff" class="off"> off</span>
</li>
</ul>
<ul class="objectivefunctions">
<h3 class="header3" id="objfuncheader">objective function</h3>
<li *ngFor="let output of outputs">
<span class="outputs">{{output.id}}</span> {{output.name}} = value: {{output.value}}
</li>
</ul>
</div>
en mémoire-data.service
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { UIConstructor, s_OneDSlider, s_TwoDSlider, s_Switch, s_Output } from './gui';
import { SimX } from './simx';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
let simxes: SimX[] = [
{ id: 1, title: "Person Simulator",
num_onedsliders: 3, num_twodsliders: 5, num_switches: 1,
num_outputs: 1, onedslider_names: ["Herbert, Gwen", "Fred"],
twodslider_names: ["Big Int", "Lead Reduction Variable",
"Overhead", "Muscle Cramp", "Perculiarity Factors"],
switch_names: ["Max/Min"],
output_names: ["Profit"]
},
{ id: 2, title: "Logistics",
num_onedsliders: 2, num_twodsliders: 2, num_switches: 1,
num_outputs: 1, onedslider_names: ["Kettlebells", 'Beans'],
twodslider_names: ["Row Reduction", "Moon Phase" ],
switch_names: ["Max/Min"],
output_names: ["Objective Function"]
}
];
let s_onedsliders: s_OneDSlider[] = [
{ id: 1, name: 'Shipping Container Purchase Cost', value: 7, quantity: 9 },
{ id: 2, name: 'Container Rental Costs', value: 99, quantity: 15 }
];
let s_twodsliders: s_TwoDSlider[] = [
{ id: 1, name: 'Available Shipping Containers', max_value: 99, min_value: 0, quantity: 3 },
{ id: 2, name: 'Purchasing Staff Available', max_value: 82, min_value: 0, quantity: 5 }
];
let s_switches: s_Switch[] = [
{ id: 1, name: 'Min/Max', state: true }
];
let s_output: s_Output[] = [
{ id: 1, name: 'Profit', value: 1000 }
];
return {simxes, s_onedsliders, s_twodsliders, s_switches, s_output};
}
}
simx.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UIConstructor, s_OneDSlider, s_TwoDSlider, s_Switch, s_Output } from './gui';
import { SimXService } from './simx.service';
import { SimX } from './simx';
@Component({
selector: 'simx',
templateUrl: './simx.component.html',
styleUrls: ['./simx.component.css'],
providers: [SimXService]
})
export class SimXComponent implements OnInit {
simxes: SimX[];
s_onedsliders: s_OneDSlider[];
s_twodsliders: s_TwoDSlider[];
s_switches: s_Switch[];
s_outputs: s_Output[];
valuesinput = false;
simXcreated = false;
ngOnInit(): void {
}
constructor(private router: Router,
private simXService: SimXService) { }
// Defines constructor values
coefficients: UIConstructor = {
id: 1,
title: 'coefficients',
value: 2
}
constraints: UIConstructor = {
id: 1,
title: 'constraints',
value: 2
}
// Placeholders -- unhide hidden elements
inputNums(): void {
this.valuesinput = true;
}
createSimX(): void {
this.simXcreated = true;
}
// Get all already created SimutronXes
getSimXes(): void {
this.simXService.getSimXes()
.then(simxes => {
this.simxes = simxes;
});
}
/* Get GUI elements */
getOneDSliders(): void {
this.simXService.getOneDSliders()
.then(sliders => {
this.s_onedsliders = sliders;
});
}
getTwoDSliders(): void {
this.simXService.getTwoDSliders()
.then(sliders => {
this.s_twodsliders = sliders;
});
}
getSwitches(): void {
this.simXService.getSwitches()
.then(switches => {
this.s_switches = switches;
});
}
getOutputs(): void {
this.simXService.getOutputs()
.then(outputs => {
this.s_outputs = outputs;
});
}
/* Create GUI elements in the DOM */
createOneDSliders(num: number): void {
for(let i = 0; i < num; i++) {
console.log(this.s_onedsliders);
console.log(this.getOneDSliders());
}
}
createTwoDSliders(num: number): void {
for(let i = 0; i < num; i++) {
this.getTwoDSliders();
}
}
createSwitches(num: number): void {
for(let i = 0; i < num; i++) {
this.getSwitches();
}
}
createOutputs(num: number): void {
for(let i = 0; i < num; i++) {
this.getOutputs();
}
}
}
simx.ts
export class SimX {
id: number;
title: string;
num_onedsliders: number;
num_twodsliders: number;
num_switches: number;
num_outputs: number;
onedslider_names: Array<string>;
twodslider_names: Array<string>;
switch_names: Array<string>;
output_names: Array<string>;
}
I Tried en cours d'exécution des tests de CONSOLE.LOG et les résultats ont été tout à fait étrange. Lorsque j'ai exécuté le test pour la première fois (vous pouvez voir l'instruction console.log dans simx.component.ts) toutes les variables de la mémoire en sortie sont non définies. Pourtant, lorsque j'ai de nouveau cliqué sur le bouton, la sortie était [object object] et les détails concernaient les données du service en mémoire.
Pourquoi cela se produit-il?
Juste remarquer que vous ne devriez pas nommer des méthodes avec un préfixe 'get' si elles ne reviennent pas une valeur. –
Certaines méthodes ne sont pas encore finies. J'ai dit que je suis complètement épuisé et que je n'ai pas encore eu l'énergie pour éditer correctement mais il a été édité par un utilisateur de haut rep. –