I'm writing an app to go into a website, which is intended to calculate simplex algorithms. At the moment I am attempting to create functionality whereby the user can enter the number of coefficients and constraints, name these whatever they wish, and have the app spawn the relevant number and type of UI elements relative to the user's input. Here's what appears to be the relevant portion of the code (app.component.ts):
import { Component } from '#angular/core';
[...]
export class UIComponent {
id: 1;
name: string;
value: number;
type: string;
}
//* Mock data */
const UICOMPONENTS: UIComponent[] = [
{ id: 1, name: 'coefficient1', value: 4, type: '1dslide' },
{ id: 2, name: 'constraint1', value: 2, type: '2dslide' },
{ id: 3, name: 'min_max', value: 0, type: 'switch' },
{ id: 4, name: 'profit', value: 100, type: 'num_output' }
];
[...]
export class AppComponent {
title = 'SimutronX';
uicomponents = UICOMPONENTS;
[...]
}
This produces an error on screen saying:
Failed to compile.
/root/simutronx/simutron-app/src/app/app.component.ts (18,49): ',' expected.
Which relates to this line:
{ id: 2, name: 'constraint1', value: 2, type: '2dslide' },
Specifically the digit 2 in 2dslide. The error message (it's extremely long so I won't reproduce it all) also includes:
./src/app/app.component.ts
Module parse failed: /root/simutronx/simutron-app/node_modules/#ngtools/webpack/src/index.js!/root/simutronx/simutron-app/src/app/app.component.ts Unexpected token (22:85)
You may need an appropriate loader to handle this file type.
| var UICOMPONENTS = [
| { id: 1, name: 'coefficient1', value: 4, type: '1dslide' },
| { id: 2, name: 'constraint1, value: 2, type: ', 2: dslide, ' },: { id: 3, name: 'min_max', value: 0, type: 'switch' }, },
| { id: 4, name: 'profit', value: 100, type: 'num_output' }
| ];
Which is particularly confusing since, as you can see, that's not how I wrote the code. What's going on here?
You have an error in UIComponent type :
export class UIComponent {
id: number; //HERE
name: string;
value: number;
type: string;
}
Here a plunker :http://plnkr.co/edit/e6GrylSWznwbYD9VpK2C
Related
I created an Angular project where I'm receiving an object with the following structure from the backend:
{
status: "ok",
totalResults: 12,
articles: [
{
source: {
id: null,
name: "Sports Illustrated"
},
author: "Albert Breer",
title: "Some Title",
description: "Some description",
urlToImage: "http://google.ch/someImage.jpg"
}
]
}
I then tried to create an interface which corresponds to this object. Yet I struggled to define properties that refer to an object resp. an array of objects (e.g. article).
In my first attempt I tried to define my object inline:
export interface Noticias {
status: string;
totalResults: number;
articles: Array<{
id: string;
name: string;
title: string;
description: string;
urlToImage: string;
}>
}
Then I tried to define the properties as duplicates:
export interface Noticias {
status: string;
totalResults: number;
id: string;
name: string;
title: string;
description: string;
urlToImage: string;
articles: Array<{
id: string;
name: string;
title: string;
description: string;
urlToImage: string;
}>
}
Visual Studio Code keeps showing me errors, therefore I doubt whether my approach is correct. Any help would be greatly appreciated!
Based on the json-structure on your first screenshot you'd rather create three separate interfaces: One for Noticias, one for Article and one for Source. Then Noticias contains an array of type Article and Article contains an object of type Source;
noticias.model.ts:
import { Article } from './article.model';
export interface Noticias {
status: string;
totalResults: number;
articles: Article[];
}
article.model.ts:
import { Source } from './source.model';
export interface Article {
source: Source;
author: string;
title: string;
description: string;
urlToImage: string;
}
source.model.ts:
export interface Source {
id: string;
name: string;
}
I have a very large json file with an error that I need to fix.
{
id: 1,
name: 'Human',
type: {
id: { <==== here
id: 2,
name: 'Body',
image: 'body.png',
}, <==== here
},
},
I need to remove this id: { and the closing brace } lines inside type. How to remove them to make the object look like this?
{
id: 1,
name: 'Human',
type: {
id: 1,
name: 'Body',
image: 'body.png',
},
},
import { GraphQLString, GraphQLScalarType } from 'graphql'
import { city } from '../../Entities/Cities'
export const CREATE_CITY = {
type: Citytype,
args: {
Name: { type: GraphQLString },
CountryCode: { type: GraphQLString },
District: { type: GraphQLString },
Info: { type: GraphQLString }
},
resolve(parent: any, args: any) {
const { Name, CountryCode, District, Info } = args;
city.insert({ Name, CountryCode, District, Info });
return args;
},
}`
import { BaseEntity, Column, Entity, PrimaryGeneratedColumn } from "typeorm";
#Entity()
export class city extends BaseEntity{
#PrimaryGeneratedColumn()
Id!: number;
#Column({ type: "char", length: 35 })
Name!: string;
#Column({ type: "char", length: 3 })
CountryCode!: string;
#Column({ type: "char", length: 20 })
District!: string;
#Column({ type: "string" })
Info!: string;
}
<I'm trying to learn graphql and I'm a day in>
The Info type is suppose to be a json, in my database it looks like {"Population": 127800} with the same definition. I'm fully aware that it isn't a string/GraphQLString but I don't know how to obtain the value of this object. It returns Info: null and an error - "message": "String cannot represent value: { Population: 127800 }" for obvious reasons.
The code has the same structure as the tutorial I watched and only this video.
Link: https://www.youtube.com/watch?v=fov5e6XJgwc&ab_channel=PedroTech
Q: I want to know how to get the population ex. {"Population": 127800} when I query
it should look like Info: {"Population": 127800}
Optional: How to get the value of population if it looks like - Info: 127800
I have been using the ng2-smart-table template. I could not able to found the location where the data save after click the add new button.some one can help me now.
In this table create data and show in the list the data what we are created. but the case is if we are refresh the browser , the above mentioned data not saved. then what should i do for add those data for firestore.
The DataSource of the mentioned module is simply an array or LocalDataSource object according to Documentation.
Let's take an example.
On typescript file define an array like this.
data = [
{
id: 1,
name: "Leanne Graham",
username: "Bret",
email: "Sincere#april.biz"
},
{
id: 2,
name: "Ervin Howell",
username: "Antonette",
email: "Shanna#melissa.tv"
},
// ... list of items
{
id: 11,
name: "Nicholas DuBuque",
username: "Nicholas.Stanton",
email: "Rey.Padberg#rosamond.biz"
}
];
settings = {
columns: {
id: {
title: 'ID'
},
name: {
title: 'Full Name'
},
username: {
title: 'User Name'
},
email: {
title: 'Email'
}
},
add:{
confirmCreate:true
},
mode:'inline'
};
On template(html).
<ng2-smart-table (createConfirm)="addData($event)" [settings]="settings"
[source]="data"></ng2-smart-table>
Again on template.
addData(event){
//event.data is the newely created data
// Handle newly created data
// Shape of object is {
// id,
// name,
// username,
// email,
// }
// You must call event.confirm.resolve() to show data on table
}
Above addData(event) function is called when click ctrate confim.
I have several components that all do the same thing:
display a form (the form varies though, so the HTML differs for each)
capture the form
validate and send the form using a REST API
There are certain things I'm looking to share among the components. For example, the forms all have a list of RadioButtons with the following values:
#Input() radioList: Object[] = [
{ label: 'Unsatisfactory', value: 1 },
{ label: 'Needs Improvement', value: 2 },
{ label: 'Meets Expectations', value: 3 },
{ label: 'Exceeds Expectations', value: 4 },
{ label: 'Outstanding', value: 5 }
];
Is there any way to share stuff like this so if I want to edit that RadioList, I don't have to do it four times?
Extend class?
//property and property-level annotations (#Input) will be picked up by ancestors
export abstract class RadioListAwareComponent{
#Input() radioList: Object[] = [
{ label: 'Unsatisfactory', value: 1 },
{ label: 'Needs Improvement', value: 2 },
{ label: 'Meets Expectations', value: 3 },
{ label: 'Exceeds Expectations', value: 4 },
{ label: 'Outstanding', value: 5 }
];
}
#Component({
template: `<div>Comp1</div>`
})
export class RadioListImplComponentONE extends RadioListAwareComponent{}
#Component({
template: `<div>Comp2</div>`
})
export class RadioListImplComponentTWO extends RadioListAwareComponent{}
You can make your own factory and inject it into your controller https://docs.angularjs.org/guide/providers