I'm getting stuck to save const variable data using Highcharts, TypeScript and Angular1.5.
This works though, doesn't show up each data.
Does anyone have any ideas to solve this?
Any suggestions would be appreciated.
Thank you so much,
Takahiro
class MSSPiesController {
private chartData:{
availability?:IPieData//data type
itemType?:IPieData//data type
linkOwner?:IPieData//data type
} = {};
public chartTest;
constructor(private $window:IWindowService,
private MSSCustomerService:IMSSCustomerService) {
'ngInject';
const data = this.MSSCustomerService.availabilityData;
console.log("Customer service", data);
}
get availabilityData():IPieData {
if (angular.isUndefined(this.chartData.availability)) {
This is the data what I want to use.
MSSCustomerService.availabilityData
has interface in other page
const data = this.MSSCustomerService.availabilityData;
if (angular.isDefined(data)) {
// this.chartData.availability = {
// labels: ['up', 'down'],
// data: [data.up, data.down],
// colours: ['#058DC7', '#50B432'],
// };
this.reflow();
Here, the below using Highcharts
this.chartTest = {
options: {
chart: {
type: 'pie',
},
},
series: [{
I want use the above variable inside.
data: [data.down, data.up]//Here, should show up the data using the above variable
// data: [10, 10]
}],
title: {
text: false
},
loading: false
};
}
}
return this.chartData.availability;
}
}
export const mssPiesComponent:IComponentOptions = {
template: `
<section class="card card-block m-t-10">
<h2 class="display-8">
Stats
</h2>
<p class="pull-right">Total Circuits: [[ $ctrl.numCircuits ]]</p>
<pie-chart title="Availability" chart-data="$ctrl.availabilityData.data" labels="$ctrl.availabilityData.labels" pie-colors="$ctrl.availabilityData.colours"></pie-chart>
<div>
[[ $ctrl.availabilityData.labels ]]
[[ $ctrl.availabilityData.data ]]
</div>
<div>
<!--Pie chart using high chart-->
<highchart id="chart1" config="$ctrl.chartTest"></highchart>
</div>
</section>
`,
controller: MSSPiesController,
bindings: {
numCircuits: '#',
}
};
Related
select2 in my angular project. I want to display a select of an array of certificate requested from an api. For each element if I create and push a select2OptionData Object in an array, but when i want to display it in the Html page it is selected but without any option. When i create an array of object like the gitHub demo everything's right.
Can you help me please.
Here is the ts
export class DashboardCvComponent implements OnInit, OnDestroy {
certificateForm: FormGroup;
certificates: Array<Certificate>;
certificatesTypes: Array<Select2OptionData>;
exampleData: Array<Select2OptionData>;
constructor(private formBuilder: FormBuilder, private certificatesService: CertificatesService,
private trainingsService: TrainingsService, private authService: AuthenticationService,
private datepipe: DateFormatPipe, private CvService: CVService, private fileUploaService: FileUploadService) {
this.certificatesTypes = [];
this.exampleData = [];
}
ngOnInit() {
// get certificate types
this.certificatesService.getAllCertificatesType('50').subscribe(
(response) => {
// console.log('-> CERTIFICATES TYPES LOADING successful : ', response);
/* this.certificatesTypes = response.data; */
response.data.forEach(element => {
const certif = {id: element.id.toString(), text: element.name};
this.certificatesTypes.push(certif);
});
this.exampleData = [{
id: 'basic1',
text: 'Basic 1'
},
{
id: 'basic2',
disabled: true,
text: 'Basic 2'
},
{
id: 'basic3',
text: 'Basic 3'
},
{
id: 'basic4',
text: 'Basic 4'
}]
console.log('les certif', this.exampleData, this.certificatesTypes);
},
(error) => {
console.log('-> CERTIFICATES TYPES LOADING failed : ', error);
},
() => {
}
);
and the html
<div class="dashboard--degrees">
<app-certificate *ngFor="let certificate of certificates" [certificate]=certificate [url]=url></app-certificate>
<button class="button button--bluegreen" type="button" data-modal="modal-certificate">
<svg class="icon icon-plus-o">
<use xlink:href="#icon-plus-o"></use>
</svg> <span i18n="##cvcomponent-addcertificate">J'ajoute un diplôme </span>
</button>
<select2 [data]="certificatesTypes"></select2>
<select2 [data]="exampleData"></select2>
</div>
Here the exampleData select display well but not the certificatesTypes
Don't use this.certificate.push inside for loop. it will not work. instead of you can use something like :
let arrCertificates = [];
response.data.forEach(element => {
const certif = {id: element.id.toString(), text: element.name};
arrCertificates.push(certif);
});
this.certificatesTypes = arrCertificates;
I'm build in Angular 8 and I'm trying to render a list of inputs and prepopulate them with JSON data. I am using Reactive Forms for this project. The types array is being mapped correctly and being stored in the group fine. One of the things I am thinking it has something to do with the FormArrayName and where it is placed compared to the FormGroupName. I am wondering if I need to wrap the FormArray Name in the FormGroup Name.
view.ts
export class View2Component implements OnInit {
// public accountArr: FormArray;
public accounts: FormArray;
public accountForm: FormGroup;
types: any = [
{
name: "Assets",
display: {
default:'Display Value',
inputType:'input'
},
type: {
default:'type Value',
inputType:'selected',
data: ['a', 'b', 'c']
},
totalDesc: {
default:'totalDesc Value',
inputType:'input'
},
underlineBefore: {
default:'underlineBefore Value',
inputType:'input'
},
underlineAfter: {
default:'underlineAfter Value',
inputType:'input'
},
reverse: {
default: false,
inputType:'checkbox'
},
print: {
default: true,
inputType:'checkbox'
},
},
{
name: "Assets",
display: {
default:'Display Value',
inputType:'input'
},
type: {
default:'type Value',
inputType:'selected',
data: ['a', 'b', 'c']
},
totalDesc: {
default:'totalDesc Value',
inputType:'input'
},
underlineBefore: {
default:'underlineBefore Value',
inputType:'input'
},
underlineAfter: {
default:'underlineAfter Value',
inputType:'input'
},
reverse: {
default: false,
inputType:'checkbox'
},
print: {
default: true,
inputType:'checkbox'
},
}
];
get getAccountArr() { return this.accountForm.get('accounts') as FormArray; }
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.accountForm = this.fb.group({
accounts: this.fb.array([])
});
this.renderAccountForm();
console.log('accountArr', this.accountForm);
}
renderAccountForm() {
this.types.map(item => {
let val = this.fb.group({
display: [item.display.default],
type: [item.type.default]
});
this.getAccountArr.push(val);
});
}
}
view.html
<form [formGroup]="accountForm" novalidate>
<div formArrayName="getAccountArr" style="height:100px; margin:40px auto;">
<div *ngFor="let account of getAccountArr.controls; let i = index;">
<div [formGroupName]="i">
<h1 class="index-class">{{ i }}</h1>
<h1>{{ account.value.display }}</h1>
<input
type="text"
formControlName="{{ i }}"
[value]="account.value.display"
[placeholder]="account.value.displays"
/>
</div>
</div>
</div>
</form>
You are using getter incorrectly.
Replace get getAccountArr() { return this.accountForm.get('accounts') as FormArray; }
with get accounts() { return this.accountForm.get('accounts') as FormArray; }
and remove public accounts: FormArray;
get acts as an 'alias' and everytime you refer to this.accounts will return the FormArray.
You need to replace this line
<div formArrayName="getAccountArr" style="height:100px; margin:40px auto;">
with
<div formArrayName="accounts" style="height:100px; margin:40px auto;">
You need to give the name of the FormArray to formArrayName directive, and getAccountArr is not an exisiting form array in your form group, it's just a property that returns your form array which is different
I am using Azure Maps and am trying to create a reusable library around their maps web sdk. I want to provide a way for a user to pass in their own popup, along with an array strongly typed objects, to add markers to the page. I have the map and the markers working, but am stuck on how to pass data to the popup. Currently I have:
az-map.component.html
<div class="map-wrapper">
<div id="az-map"></div>
</div>
<ng-template #defaultMarker>
<div>
<img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png" />
</div>
</ng-template>
<ng-template #defaultPopup>
<div>
<h2>~name~</h2>
</div>
</ng-template>
<div style="display:none">
<div id="marker" #marker>
<ng-container *ngTemplateOutlet="markerTemplate ? markerTemplate : defaultMarkerTemplate"></ng-container>
</div>
<div id="popup" #popup>
<ng-content select="[popupTemplate]"></ng-content>
</div>
</div>
az-map.component.ts
#Component({
selector: 'az-map',
templateUrl: './azure-map.component.html',
styleUrls: ['./azure-map.component.scss']
})
export class AzureMapComponent implements OnInit {
#Input() locations: Location[];
#Input() mapConfig: AzureMapConfig;
#Input() markerTemplate: TemplateRef<any>;
#ViewChild('defaultMarker') defaultMarkerTemplate: TemplateRef<any>;
#ViewChild("popup") popupElement: ElementRef;
#ViewChild("marker") marker: ElementRef;
/* These are the map components we can interact with */
public map: any;
public popup: atlas.Popup;
public symbolLayer: atlas.layer.SymbolLayer;
private dataSource: atlas.source.DataSource;
constructor(private configService: ConfigurationService) { }
ngOnInit() {
const centerPosition: any = this.mapConfig.center.length
? this.mapConfig.center
: ( this.locations && this.locations.length > 0 ? [this.locations[0].longitude, this.locations[0].latitude] : [-95, 38]);
this.map = new atlas.Map('az-map', {
center: centerPosition,
zoom: this.mapConfig.zoom,
authOptions: {
authType: atlas.AuthenticationType.subscriptionKey,
subscriptionKey: this.configService.get().azureMapKey
}
});
this.map.events.add('ready', () => {
this.dataSource = new atlas.source.DataSource();
this.map.sources.add(this.dataSource);
this.addMarkers();
this.symbolLayer = new atlas.layer.SymbolLayer(this.dataSource, null)
this.map.layers.add(this.symbolLayer);
if (this.mapConfig.showControls) {
this.map.controls.add(new atlas.control.ZoomControl(), {
position: "top-right"
});
}
if(this.mapConfig.showPopups){
this.popup = new atlas.Popup({
pixelOffset: [0, -18],
closeButton: false
});
const _this = this;
this.map.events.add('mouseover', this.symbolLayer, (e) => {
if (e.shapes && e.shapes.length > 0) {
var coordinate;
const popupHtml = _this.popupElement.nativeElement.innerHTML;
var props = e.shapes[0].getProperties();
coordinate = e.shapes[0].getCoordinates();
_this.popup.setOptions({
//Update the content of the popup.
content: popupHtml,
//Update the popup's position with the symbol's coordinate.
position: coordinate
});
//Open the popup.
_this.popup.open(_this.map);
}
});
this.map.events.add('mouseleave', this.symbolLayer, (e) => {
this.popup.close()
});
}
});
}
private addMarkers(): void {
const html = this.marker.nativeElement.innerHTML;
this.locations.forEach(l => {
const point = new atlas.Shape( new atlas.data.Point([l.longitude, l.latitude]));
this.dataSource.add(point);
});
}
}
and an example of it being used here:
<h1>Account Coverage</h1>
<div class="map-wrapper col-12">
<az-map [mapConfig]="mapConfig" [locations]="locations" class="col-12 h-50">
<coverage-popup popupTemplate></coverage-popup>
</az-map>
</div>
This works and shows the popup, but I need to find a way to pass data to the CoveragePopupComponent in the mouseover event in the az-maps.component.ts
One method we tried to use, which works well when you only have a single popup type that needs to be handled was to use the ComponentFactoryResolver like this:
const factory = this.componentFactoryResolver.resolveComponentFactory(PopupComponent);
const component = factory.create(this.injector);
component.instance.machine = shape.getProperties();
component.changeDetectorRef.detectChanges();
const popupContent = component.location.nativeElement;
this.map.setCamera({
center: shape.getCoordinates(),
type: 'ease',
});
this.popup.setOptions({
position: shape.getCoordinates(),
content: popupContent,
pixelOffset: [0, -20]
});
this.popup.open(this.map);
but then you always have to use the PopupComponent type and couldn't use the ng-content stuff we have in the map template.
I want to bind the data that i get from my JSON request to the *NgFor to be able to read it out, This is how the data looks like that i get in:
{Id: null, Code: "9348892084", HasInfo: true, Info: Array(26)}
HasInfo:true
Info:
Array(26)
0:{ProductId: 32631, Name: "JNOOS", Image: "http://sd-m-mg", …}
1:{ProductId: 32969, Name: "SWIFT", Image: "http://sd-33087.jpg",…}
2:{ProductId: 32570, Name: "GABIX", Image: "http://sd-c7273.jpg", …}
3:{ProductId: 32473, Name: "MISMA", Image: "http://sd-mt8-8343e4d95.jpg", …}
I was working with AngularJS before and there i made the request as such:
$scope.getAll{
$http({
method: 'Get',
url: "http://URL/" + Code
})
.success(function (data) {
$scope.All = data.Info;
})
No i am moving to Angular5 and i would like to get the same array of information bind to the :
<div *ngFor="let x of info">
{{ x.Name }}
</div>
How would i adjust the below to get the same as above?
export class AppComponent {
readonly ROOT_URL = 'http://url/content/'
constructor(private http: HttpClient) {}
ngOnInit() {
this.getData()
}
getData() {
this.http.get(this.ROOT_URL + 'Getscope')
.subscribe(
data => {
var test = data;
// var info = data.Info = not valid!;
// var test can't be approached by *ngFor
console.log(test);
console.log(test.info);
//$scope.info = data.Info;
//this.info = data;
}, error => {
console.error("HTTP FAILURE ERROR!!!");
}
)
};
}
Also the json output has an array inside an object, do i say this correct?
From your code you are using info in html but not assigning to any class variable,
Take a public variable public info; and assign data using this.info = data.Info
Component:
export class AppComponent {
readonly ROOT_URL = 'http://url/content/'
public info;
constructor(private http: HttpClient) {}
ngOnInit() {
this.getData()
}
getData() {
this.http.get(this.ROOT_URL + 'Getscope')
.subscribe(
data => {
this.info = data['Info']; // here is the change
}, error => {
console.error("HTTP FAILURE ERROR!!!");
}
)
};
}
Your HTML can be same:
<div *ngFor="let x of info">
{{ x.Name }}
</div>
The simplest solution would be to use an async pipe. This way you do not need to subscribe to the stream returned by http.get.
app.component.ts
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';
export class AppComponent {
readonly url = 'http://url/content/'
constructor(private http: HttpClient) {}
info$: Observable<any[]>;
ngOnInit() {
this.info$ = this.http.get(this.url + 'Getscope')
.pipe(map(resp => resp.Info));
}
}
app.component.html
<div *ngFor="let x of info$ | async">
{{ x.Name }}
</div>
I'm trying to convert my data json from an array to an object to be able to consume the data but something went wrong...
Here is the data json sample:
[
{
"id": 1,
"title": "my title",
"imgHero": "../../path/hero.jpg"
}
]
And here is the Vue component:
<template>
<div class="hero">
<img :src="blog.imgHero" alt="hero image" class="heroImg">
<h3 class="heroTitle">{{ blog.title }}</h3>
</div>
</template>
<script>
import tripsJson from '#/data/trips.json'
export default {
name: 'App',
data () {
return {
array: tripsJson,
blog: {}
}
},
created () {
var obj = this.array.reduce(function (acc, cur, i) {
acc[i] = cur
return acc
}, {})
this.blog = obj
console.log(this.blog)
}
}
</script>
Any help or suggestion is more than welcome. Thx