My Angular 6 project will not build with the command;
ng build --prod --configuration=production --base-href=/quickorder/
and gives the errors;
ERROR in src\app\order-input\order-input.component.html(43,17): : Property 'number' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(58,57): : Property 'autoCorrect' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(58,19): : Property 'value' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(72,19): : Property 'value' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(82,19): : Property 'value' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(112,31): : Property 'checked' does not exist on type 'OrderInputComponent'.
src\app\order-input\order-input.component.html(112,31): : Property 'checked' does not exist on type 'OrderInputComponent'.
These seem to be coming from my kendo-ui components.
My angular.json;
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
However, if I set aot and buildOptimizer to false, it works. Is this a problem with Angular or am I doing something wrong?
Some of the html;
<label class="k-form-field required" for="product" style="width: 40%; display: inline-block">
<span>Select Product</span>
<kendo-autocomplete class="form-control" id="product" name="product" required validationMessage="Select Product"
[popupSettings]="{width: 400}"
style="width: 100%;"
[data]="listItems"
**Line 43-->[value]=number**
[valueField]="'PackDescription'"
[filterable]="true"
[placeholder]="'e.g. Wheat or 25KG (3 character minimum)'"
(valueChange)="valueChange($event)"
(filterChange)="filterChange($event)"
[(ngModel)]="product"
[ngModelOptions]="{standalone: true}">
</kendo-autocomplete><span class="k-invalid-msg" data-for="product"></span>
</label>
<label class="k-form-field required" for="quantities" style="display: inline-block">
<span>Quantity</span>
<!-- <input style="width: 150px" type="number" class="form-control" [(ngModel)]="quantity" name="quantities" id="quantities" required validationMessage="Select Quantity"> -->
<kendo-numerictextbox
[value]="value" [min]="1" [max]="200" [autoCorrect]="autoCorrect"
[(ngModel)]="quantity"
[ngModelOptions]="{standalone: true}">
</kendo-numerictextbox>
<span class="k-invalid-msg" data-for="quantities"></span>
</label>
Thr .ts;
export class OrderInputComponent implements OnInit {
MINFILTERLENGTH: number = 3;
ref: string;
name: string;
repRef: string;
allData: any[];
xrefAddress = [];
addressListItems: Array<Object> = [];
listItems: Array<Object> = [];
selectedItem: Object;
orderLines: Array<Object> = [];
total: number;
addressNumber: string;
productNumber: string;
defaultAddressItem: { name: string, number: number } = {name: "Select Address...", number: null};
newOrderLines: Array<Object> = [];
tradingpartner: string;
product: string;
productRef: string;
productDesc: string;
quantity: number;
price: number;
selectedValue: number;
orderRef: string = null;
orderError: string = null;
fd: Date;
td: Date;
fromDate: string;
toDate: string;
collection: boolean;
debug: boolean = false;
comments: string;
public events: string[] = [];
constructor( private user: UserService,
private router:Router,
private orders: OrdersService,
private route: ActivatedRoute,
private productXref: ProductXrefService,
private addressXref: AddressXrefService,
private intl: IntlService,
private createOrderService: CreateOrderService,
private globalsService: GlobalsService,
private location: Location,
private ngxXml2jsonService: NgxXml2jsonService,
private localStorageService: LocalStorageService) {
Thanks in advance for any help,
Mark.
P.S. I should add that ng serve and ng build work fine.
I don't know why, but sometimes with the kendo controls, adding or removing the [] will get you through this error:
autoCorrect="autoCorrect" instead of [autoCorrect]="autoCorrect"
Hope this helps!
Related
I am new to React TypeScript. I have a problem with the passing state. When I tried to pass the state to a child component and conosle.log(state), I can see the correct object. But, when I tried to do console.log(state.name), I have an error. How can I solve this problem?
App.tsx
export interface Information {
name: string;
age: string;
}
const App: FC = () => {
const [state, setState] = useState<Information | null>({
name: "young",
age: "10",
});
return (
<div className="App">
<div className="header">
<div className="inputContainer">
<input type="text" placeholder="Task.." name="task" />
<input type="number" placeholder="Deadline" name="deadline" />
</div>
<button>Add Task</button>
<div>
<MyForm state={state} />
</div>
</div>
</div>
);
};
Child component
type Props = {
state: ReactNode;
};
const MyForm: FC<Props> = ({ state }: Props) => {
console.log(state.name); // Error
return <div>Hello, {state}</div>;
};
export default MyForm;
Thank you!
The error because you're trying to read the state object inside JSX
return <div>Hello, {state}</div>
Read it like you would with objects instead:
return <div>Hello, {state.name}</div>
Also in your MyForm Component Props, use your Information interface as a type definition instead of ReactNode
export interface Information {
name: string
age: string
}
type Props = {
state: Information
}
I'm struggling a bit with the proper pattern to use here. I have a model which represents a power selector called selector, each selector has a hasMany with selectorOption which makes up the options for the selector
I then have a dashboardItem model which loops over each selector and implements it.
route.js
export default Route.extend({
model(params) {
return RSVP.hash({
dashboard: get(this, 'store').findRecord('dashboard', params.dashboard_id),
selectors: get(this, 'store').findAll('selector'),
});
},
setupController(controller, models) {
controller.setProperties(models);
},
});
template.hbs
{{#each selectors as |selector|}}
<div class="column is-12 object-item">
<div class="card">
<header class="card-header">
<p class="card-header-title">
{{selector.title}}
</p>
</header>
<div class="card-content">
{{#power-select-multiple
placeholder="Vision"
options=selector.selectorOptions
searchEnabled=false
onchange=(action 'something...') as |option|}}
{{option.title}}
{{/power-select-multiple}}
</div>
</div>
</div>
{{/each}}
I'm not sure what to do on the onchange, either with a custom function or using built in tools of power-select.
Each selector is a multi-selector.
This works correctly to the point that I can create any number of selectors and they display on the front end with their correct options as expected.
How should I go about saving the options the users choose against the dashboardItem?
Here is a section from the database which shows the models and their relationships. Note there is currently no relationship between a selector and a dashboardItem (Maybe there should be though?)
{
"selectorOptions" : {
"-Kyc7on207d_IxnNw2iO" : {
"title" : "Apple",
"vision" : "-Kyc7nG9Bz3aEGLked8x"
},
"-Kyc7qC9_uxFgXP9c7hT" : {
"title" : "Orange",
"vision" : "-Kyc7nG9Bz3aEGLked8x"
},
"-Kyc7qqZPMikoG1r3r5g" : {
"title" : "Bannana",
"vision" : "-Kyc7nG9Bz3aEGLked8x"
},
"-Kyc7uZu8MTfUdH70cBR" : {
"title" : "Blue",
"vision" : "-Kyc7rtTPTMJxAPacg-L"
},
"-Kyc7vJC3ImzVOEraALx" : {
"title" : "Green",
"vision" : "-Kyc7rtTPTMJxAPacg-L"
},
"-Kyc7wCrqDz8CD_I-dYy" : {
"title" : "Red",
"vision" : "-Kyc7rtTPTMJxAPacg-L"
}
},
"selectors" : {
"-Kyc7nG9Bz3aEGLked8x" : {
"title" : "Fruits",
"selectorOptions" : {
"-Kyc7on207d_IxnNw2iO" : true,
"-Kyc7qC9_uxFgXP9c7hT" : true,
"-Kyc7qqZPMikoG1r3r5g" : true
}
},
"-Kyc7rtTPTMJxAPacg-L" : {
"title" : "Colours ",
"selectorOptions" : {
"-Kyc7uZu8MTfUdH70cBR" : true,
"-Kyc7vJC3ImzVOEraALx" : true,
"-Kyc7wCrqDz8CD_I-dYy" : true
}
}
}
}
The solution was to not fight against relationships with basic array storage.
For example
Base
export default Model.extend({
title: attr('string'),
visionOptions: hasMany('vision-option'),
});
Bases Options
export default Model.extend({
title: attr('string'),
vision: belongsTo('vision'),
});
The model to save the selected objects on
export default Model.extend({
//...
visionOptions: hasMany('vision-option', {async: true}),
//...
});
The component to handle saving, and selecting the correct objects
export default Component.extend({
tagName: "",
classNames: "",
selectedVisions: computed('dashboardItem.visionOptions', function () {
const visionId = this.get('vision.id');
const options = this.get('dashboardItem.visionOptions');
return options.filterBy('vision.id', visionId);
}),
actions: {
addVision(newList) {
let dashboardItem = get(this, 'dashboardItem');
let options = get(this, 'selectedVisions');
options.forEach(function (me) {
if (!newList.includes(me)) {
dashboardItem.get('visionOptions').removeObject(me);
}
});
newList.forEach(function (me) {
if (!options.includes(me)) {
dashboardItem.get('visionOptions').pushObject(me);
}
});
dashboardItem.save().then(() => {
dashboardItem.notifyPropertyChange('visionOptions')
});
}
}
});
Template to render power-select
{{#power-select-multiple
placeholder=""
options=vision.visionOptions
searchEnabled=false
selected=selectedVisions
onchange=(action 'addVision') as |vision|}}
{{vision.title}}
{{/power-select-multiple}}
This allows there to be an unknown number of "visions", with an unknown number of "visionObjects" to be loaded and saved.
The notifyPropertyChange is required to update the computed property so the frontend renders when a user adds or removes a selected object. This is only awkward because there isn't a direct known database key.
I've a very problem with ionic 2, I'm obtaining a JSON object and I can check that object data exists using the code <span>{{ user|json }}</span>, but when I'm using the the code <span>{{ user.id }}</span> an exception is displayed with the message "can not read property id of null". The this.userService.get( this.user_id ) method is used on another section and this working fine, but in this section not, can you help me with it?
This is my code:
<!-- my profile.html view -->
<ion-row>
<ion-col col-4>
Tipo de socio
</ion-col>
<ion-col col-8>
<span>{{ user.id }}</span><!-- cannot read id property of a null -->
</ion-col>
</ion-row>
<ion-row>
<ion-col col-4>
Tipo de socio
</ion-col>
<ion-col col-8>
<span>{{ user|json }}</span><!-- the data is returned -->
</ion-col>
</ion-row>
// My profile.ts ( where I'm loading the view and calling the user services )
import { User, UserService } from '../../app/models/user';
#Component({
selector: 'page-profile',
templateUrl: 'profile.html'
})
export class ProfilePage {
title = 'My Profile';
user: User = null;
private user_id: number = 0;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public alertCtrl: AlertController,
public modalCtrl: ModalController,
public loadingCtrl: LoadingController,
public userService: UserService) {
this.user_id = this.navParams.get('user_id'); // this value is working fine!
if ( this.user_id > 0 ) {
this.userService.get( this.user_id ).then( user => this.user = user );
}
}
ionViewDidLoad() { }
}
// My user.ts ( where I've my services )
#Injectable()
export class User {
id: number;
name: string;
email: string;
ic: number;
birth_date: string;
home_phone: number;
phone: number;
is_active: boolean;
is_admin: boolean;
from_social_account: boolean;
is_superuser: boolean;
status: boolean;
created_at: any;
updated_at: any;
groups: any;
permissions: any;
addresses: any;
all_permissions: any;
auth_token: string;
is_customer: boolean;
is_partner: boolean;
last_login: string;
profile: any;
requests: any;
skills: any;
social_providers: any;
wallets: any;
errors: any = null;
birth_date_no_formatted: string;
main_address: any;
}
#Injectable()
export class UserService {
private headers: Headers = new Headers(Constant.DEFAULT_HEADERS);
private url: string = `${Constant.API_HOST}${Constant.API_PREFIX}${Constant.API_V1}`;
constructor(
private http: Http) { }
get( _id: number ): Promise<User> {
let url = `${this.url}users/${_id}/`;
return this.http.get(url, { headers: this.headers })
.toPromise().then( response => response.json() as User ).catch(this.handleError);
}
private handleError(error: any): any {
console.log( JSON.stringify( error ) );
return {errors: StaticMethods.formatSubmitErrors( error.json() ) };
}
}
Your code actually works but try to show null value until return promise data.
To fix problem, you can use safe-navigation operator like this :
{{ user?.id }}
So, id and others is only read when user not null.
I am trying to make an website that connets with a weather api and gets some info about current weather in given city. When i looked at network flow in my application i do recive a json that contais that information but i cannot map it and display results. Error i revice is :
TypeError: response.json(...).map is not a function WeatherSearchComponent.ts:138
at MapSubscriber.project (WeatherSearchComponent.ts:84)
at MapSubscriber._next (map.js:77)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at XMLHttpRequest.onLoad (http.umd.js:1083)
at ZoneDelegate.invokeTask (zone.js:225)
at Object.onInvokeTask (core.umd.js:6004)
at ZoneDelegate.invokeTask (zone.js:224)
at Zone.runTask (zone.js:125)
at XMLHttpRequest.ZoneTask.invoke (zone.js:293)
Heres WeatherSearchComponent:
import {
Component,
Injectable,
OnInit,
ElementRef,
EventEmitter,
Inject
} from '#angular/core';
import { Http, Response } from '#angular/http';
import { Observable } from 'rxjs';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
export var WEATHER_API_KEY: string = 'api_key';
export var WEATHER_API_URL: string ='http://api.openweathermap.org/data/2.5/weather';
export var GDANSK_ID: string = '3099434';
/*let loadingGif: string = ((<any>window).__karma__) ? '' :
require('images/loading.gif');*/
class SearchResult {
content: string;
constructor(obj?: any) {
this.content= obj && obj.content ||
WEATHER_API_URL + 'id=' + obj.city + 'appid=' + WEATHER_API_KEY;
}
}
// http://api.openweathermap.org/data/2.5/weather?
// id=3099434&appid=api_key
#Injectable()
export class WeatherService {
constructor(private http: Http,
#Inject(WEATHER_API_KEY) private apiKey: string,
#Inject(WEATHER_API_URL) private apiUrl: string) {
}
search(city: string): Observable<SearchResult[]> {
let params: string = [
`q=${city}`,
`appid=${this.apiKey}`
].join('&');
let queryUrl: string = `${this.apiUrl}?${params}`;
console.log("query url" , queryUrl);
var getRequest = this.http.get(queryUrl);
console.log("getRequest", getRequest);
return getRequest
.map((response: Response) => {
return (<any>response.json()).map(item => {
console.log("raw item", item); // uncomment if you want to debug
return new SearchResult({
content: item.main.temp
});
});
});
}
}
export var weatherServiceInjectables: Array<any> = [
{provide: WeatherService, useClass: WeatherService},
{provide: WEATHER_API_KEY, useValue: WEATHER_API_KEY},
{provide: WEATHER_API_URL, useValue: WEATHER_API_URL}
];
/**
* SearchBox displays the search box and emits events based on the results
*/
#Component({
outputs: ['loading', 'results'],
selector: 'search-box',
template: `
<input type="text" class="form-control" placeholder="Search" autofocus>
`
})
export class SearchBox implements OnInit {
loading: EventEmitter<boolean> = new EventEmitter<boolean>();
results: EventEmitter<SearchResult[]> = new EventEmitter<SearchResult[]> ();
constructor(private weather: WeatherService,
private el: ElementRef) {
}
ngOnInit(): void {
// convert the `keyup` event into an observable stream
var observable =
Observable.fromEvent(this.el.nativeElement, 'keyup');
observable
.map((e: any) => e.target.value) // extract the value of the input
.filter((text: string) => text.length > 1) // filter out if empty
.debounceTime(250) // only once every 250ms
.do(() => this.loading.next(true)) // enable loading
// search, discarding old events if new input comes in
.map((query: string) => this.weather.search(query))
.switch()
// act on the return of the search
.subscribe(
(results: SearchResult[]) => { // on sucesss
this.loading.next(false);
this.results.next(results);
},
(err: any) => { // on error
console.log(err);
this.loading.next(false);
},
() => { // on completion
this.loading.next(false);
}
);
}
}
#Component({
inputs: ['result'],
selector: 'search-result',
template: `
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="{{result.thumbnailUrl}}">
<div class="caption">
<h3>{{result}}</h3>
<p>{{result}}</p>
<p><a href="{{result.videoUrl}}"
class="btn btn-default" role="button">Watch</a></p>
</div>
</div>
</div>
`
})
export class SearchResultComponent {
result: SearchResult;
}
#Component({
selector: 'weather-search',
template: `
<div class='container'>
<div class="page-header">
<h1>Weather Search</h1>
</div>
<div class="row">
<div class="input-group input-group-lg col-md-12">
<search-box
(loading)="loading = $event"
(results)="updateResults($event)"
></search-box>
</div>
</div>
<div class="row">
<search-result
*ngFor="let result of results"
[result]="result">
</search-result>
</div>
</div>
`
})
export class WeatherSearchComponent {
results: SearchResult[];
updateResults(results: SearchResult[]): void {
this.results = results;
// console.log("results:", this.results); // uncomment to take a look
}
}
This is what i do recive from api call :
/*
{"coord":{"lon":18.65,"lat":54.35},
"weather":[{"id":801,"main":"Clouds",
"description":"few clouds","icon":"02n"}],"base":"stations",
"main":{"temp":270.15,"pressure":1035,"humidity":92,
"temp_min":270.15,"temp_max":270.15},"visibility":10000,
"wind":{"speed":2.1,"deg":290},"clouds":{"all":20},
"dt":1484665200,
"sys":{"type":1,"id":5349,"message":0.0029,
"country":"PL","sunrise":1484636080,"sunset":1484665040},"
id":3099434,"name":"Gdansk","cod":200}
*/
It's not clear from your question whether you're trying to .map() on a variable or on an observable.
Scenario #1: variable.map()
variable must be an array. Looks from your code that your variable contains an object.
const jsonData = {
"coord":{"lon":18.65,"lat":54.35},
// Abridged for brevity...
id":3099434,"name":"Gdansk","cod":200
};
jsonData.map(...); // WON'T WORK - `jsonData` must be an array
Scenario #2: observable.map()
You must import the map operator in your code before mapping:
import 'rxjs/add/operator/map';
// Then, later
Observable.map(...);
I'm currently working on an interactive chart which should calculate potential risk-factors of commercial project. I've been using Baidu ECharts for this, and got the graph working visually, but can't get the graph to update when data changes.
The data comes from an external questionnaire, which uses radiobuttons for the values and a checkbox to turn the whole set on and off.
<input type="checkbox" id="GPEbool" value="true"> Example Question 1</h4>
<form action="">
<input type="radio" id="polishedness" value="1"> Idea<br>
<input type="radio" id="polishedness" value="1"> Concept<br>
<input type="radio" id="polishedness" value="2"> Mockup<br>
<input type="radio" id="polishedness" value="5"> Prototype<br>
<input type="radio" id="polishedness" value="7"> Playable<br>
<input type="radio" id="polishedness" value="15"> Polish<br>
<input type="radio" id="polishedness" value="30"> Finished<br>
</form>
Now, the problem is getting the data into the graph. It gets the initially selected value right (when adding "checked" to one of them), but won't update after that.
data: [{ value: $('input[name=polishedness]:checked').val(), name: 'Design'}]
I've tried calling the refresh function whenever something changes, but it'll return refresh is not a function. I'm really at loss, and the Chinese documentation doesn't help me much :)
Any suggestions? Thanks in advance!
You have to call chartInstance.setOption() again with your new data.
I give you a small example:
// eChart is the chart instance!
echart.setOption({
// .... some configuration
series: [
{
type: "line",
name: "test",
data: [1,2,3,4,5,6]
}
]
})
After you changed the value of your select box, you have to catch that event, change the value of the configuration object and call chartInstance.setOption() again.
Therefore, it is sometimes advisable to save your complete configuration object and store your changes there.
You can use resize() method, for example
window.chartRadar = echarts.init(document.getElementById('echartId'));
window.chartRadar.setOption({
title: {
text: 'radar echart'
},
tooltip: {},
legend: {
data: ['data1', 'data2']
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: 'sales', max: 6500},
{ name: 'Administration', max: 16000},
{ name: 'Information Techology', max: 30000},
{ name: 'Customer Support', max: 38000},
{ name: 'Development', max: 52000},
{ name: 'Marketing', max: 25000}
]
},
series: [{
name: 'Budget vs spending',
type: 'radar',
// areaStyle: {normal: {}},
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : 'data1'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : 'data2'
}
]
}]
});
Once you alreay make you echart you cloud use the method "resize()" for redraw the echar for example
window.chartRadar.resize();
If you are using Angular ,
You can also use the [merge] option to have the Chart responding for the value changes,
<div echarts [options]="initialValue" [merge]= "dynamicData" class="demo-chart"></div>
Reference : https://github.com/xieziyu/ngx-echarts#api
In your Module assign Initial Value as below,
initialValue: EChartOption = {
xAxis: {
type: 'time',
splitNumber : 20
},
yAxis: {
type: 'value',
name : '$',
nameLocation: 'middle'
},
series: [{
data : [],
type: 'line'
}]
}
and set the Dynamic value based on your data, Also initialize "this.dynamicData" before making the api calls to the external service
formDataforChart(backTestTrades) {
let i = 0;
for(let backTestTrade of backTestTrades){
let profitAndTime = [];
profitAndTime.push(backTestTrade.exitTime);
profitAndTime.push(backTestTrade.profitOrLoss);
this.eChartDataSeries.push(profitAndTime);
}
let data = {
data : this.eChartDataSeries,
type : 'bar'
};
this.dynamicData=this.initialValue;
this.dynamicData.series = [];
// Applying my dynamic data here
this.dynamicData.series.push(data);
}