#Component(
selector: 'my-app',
template: ''' <div> <button (click)="getItemName(2)"> get</button> </div> ''',
)
class ListComponent { //...
List<Product> listProducts;
void getItemName(int id) {
print(listProducts[id].name); // <- invalid argumant (index) : "2"
}
}
html_dart2js.dart:3558 EXCEPTION: Invalid argument (index): "0"
STACKTRACE: Invalid argument (index): "0"
at Object.wrapException (http://127.0.0.1:8092/main.dart.js:4242:17)
at Interceptor.$index (http://127.0.0.1:8092/main.dart.js:1082:19)
at Object.J.$index$asx (http://127.0.0.1:8092/main.dart.js:102985:43)
at GroupsComponent.add$1 (http://127.0.0.1:8092/main.dart.js:45152:46)
at Object.J.add$1$ax (http://127.0.0.1:8092/main.dart.js:103054:42)
at ViewGroupsComponent0.dart.ViewGroupsComponent0._handle_click_131_0$1
where do i make mistakes thanks
The index parameter needs to be an integer value, not a string.
Related
Using a Syncfusion EJS Autocomplete element in a search box.
The issue being reported is that the user is not able to select the value searched
I know the issue, is because the data passed to the AutoComplete has some duplicate values, but they are distinct based on a second value.
The code below hopefully show the issue
<div class="control-section" style="margin:130px auto;width:300px">
<ejs-autocomplete
id="sample-list"
#sample
[dataSource]="countriesData"
[autofill]="isBool"
[fields]="fields"
(select)='selectIssuer($event)'
filterType="Contains"
>
<ng-template #itemTemplate let-data>
<!--set the value to itemTemplate property-->
<div class='item'>
<div>{{data.Name}} -- {{data.Structure != 'SPV' ? 'BT' : data.Structure}}</div>
</div>
</ng-template>
</ejs-autocomplete>
</div>
/**
* AutoComplete Highlight Sample
*/
import { Component, ViewChild } from '#angular/core';
import { AutoCompleteComponent } from '#syncfusion/ej2-angular-dropdowns';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
})
export class AppComponent {
public countriesData = [
{ Name: 'Client 1' , Id: 'A3D49279-18DC-40FB-B843-B6207518B379', Structure: 'BT'},
{ Name: 'Client 1' , Id: '77ED2BD8-2309-4792-9264-01DEAFC3227E', Structure: 'SPV'},
{ Name: 'Client 2' , Id: 'BA017D4F-DD5C-4F2D-852C-DD17AF209436', Structure: 'BT'},
{ Name: 'Client 3' , Id: '78FCDCB9-06EA-4D9B-A352-171B1594AE24', Structure: 'SPV'},
{ Name: 'Client 4' , Id: '48C3168A-FA2A-4EF7-B184-61F18C47AB6D', Structure: 'BT'},
{ Name: 'Client 4' , Id: 'E734CA83-91FF-4475-B35E-BE232ACBF137', Structure: 'SPV'}
];
public fields: Object = { value: 'Name' };
public isBool: Boolean = true;
}
selectIssuer(_issuer: any) {
this.getSearchIssuer.emit({ issuer: <CombinedIssuer>_issuer.itemData, clear: false });
}
AS is visible, some of the Client Names are the same, but what makes them distinct is the combination with the Structure.
The issue is that when a user selects say Client 4 that has an SPV Structure, it still loads the Client 4 with the BT structure.
Is it possible for the EJS Autocomplete to take in to consideration the combination of fields to make sure the correct item is selected or is is possible for the EJS Autocomplte to use the Item Id as well
Can it be possible to pass in the Id value to the Fields property ?
I was able to figure this out, so sharing my findings:
The additional code is shown below with ...
<ejs-autocomplete id='combinedIssuerSearch' #searchCombinedIssuers
[dataSource]='ixDispalyCombinedIssuerList'
[fields]='issuerFields'
ShowBorder='False'
(select)='selectIssuer($event)'
[placeholder]='defaultText'
[filterType]='issuerFilterType'
*(filtering)='onFiltering($event)'*
[showClearButton]="false"
class="auto-complete-search">
<ng-template #itemTemplate let-data>
<!--set the value to itemTemplate property-->
<div class='item'>
<div class='issuer-name'> {{data.Name}}</div>
<div class="ls_spv">{{data.Structure != 'SPV' ? 'BT' : data.Structure}}</div>
</div>
</ng-template>
</ejs-autocomplete>
in the ts file I added code to handle the OnFiltering event
onFiltering(args) {
args.preventDefaultAction = true;
var predicate = new Predicate('Name', 'contains', args.text, true);
predicate = predicate.or('Structure', 'contains', args.text, true);
var query = new Query();
query = args.text != '' ? query.where(predicate) : query;
args.updateData(this.ixDispalyCombinedIssuerList, query);
}
I want to write in less code a function that will add the active classname and automatically removes all the other active class names. But there is also a unique class name needed for JavaScript in my case. But want to put that all in class name. How can I make this a valid classname. Is there a way to do that so it will not conflict with each other.
<ul class="three">
<li
v-for="(post, index) in listData.data"
:key="index"
:class="'list-item unordered-list ' + post.name.toLowerCase() + { active : activeName == post.name}"
#click="showInfo(post.name, post.description)">
{{ post.name }}
</li>
</ul>
Have a look at the object syntax or array syntax of class binding, which allows binding to an object or array returned by a value. That way you can simplify complex class or style combinations by calling a function from the template, like the example from the docs:
<div v-bind:class="classObject"></div>
...
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
<ul class="three">
<li
v-for="(post, index) in listData.data"
:key="index"
:class="['list-item', 'unordered-list ', post.name.toLowerCase(), { active: activeName == post.name }]"
#click="showInfo(post.name, post.description)">
{{ post.name }}
</li>
</ul>
so i have a getter (neither getter or paged component have all desired status values) im thinking of somehow using the getter for this without success
getStatusValues: (state) => {
return [
{ id: 0, name: i18n.t('OK') },
{ id: 1, name: i18n.t('Running') },
{ id: 2, name: i18n.t('Error') }
]
},
and i want to bind a class to a button in this self paged component
<div class="objs">
<div
v-for="obj in objPage"
:key="obj.id"
class="obj"
>
<button
:class="{class1:obj.status === 'OK', class2: obj.status === 'NotRunning', class3: obj.status === 'Running', Err: obj.status === 'Error'}"
#click="Dialog(obj)"
>
{{ obj.id }}
</button>
</div>
<div
v-for="i in (objPage.length < 9) ? 9 - objPage.length : 0"
:key="i"
class="empty"
/>
</div>
is there a way i could perhaps make all the status values dynamically be the class names and only have to do one check for {classname:obj.status === "classname"} cause the way i have went about it is not the best and i want to find a diffrent one
The answer is
:class="obj.status"
I am using zingchart in my angular2 application and came a cross this problem.
when I am trying to click the node - I get:
angular2.dev.js:23730 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'parentNode' of null
when I try to do that same when I am in debug mode - i.e. do it slower when jumping from line to line everything works fine.
I read a lot about about the Uncaught (in promise): TypeError: here and tried some solutions but with no luck.
Maybe anyone have an idea for me?
Thanks
I have a pie chart:
Which have the following code:
render(){
this.zone.runOutsideAngular(() => {
zingchart.render({
id : this.chart['id'],
data : this.chart['data'],
width : this.chart['width'],
height: this.chart['height']
});
zingchart.node_click = function(p) {
window.location.href = #/resources";
}
});}
my resource component is very simple:
import { Component } from 'angular2/core';
#Component({
selector: 'resources-component',
templateUrl: `I am the resource page`,
})
export class ResourcesComponent {
title: string = 'resources';
constructor() {
}
}
I'm trying to get element by class name with Sencha Touch
itemswipe: function(dataview, index, element, e) {
console.log(element.select('.x-list-disclosure'));
}
but it returns this error:
TypeError: Result of expression 'element.select' [undefined] is not a function.
Here is the full code block
var list1 = new Ext.List({
flex: 1,
cls: 'list_simple',
sorters: ['firstName', 'group'],
itemTpl: '{firstName} {lastName}',
grouped: true,
groupTpl : [
'<tpl for=".">',
'<div class="x-list-group x-group-{id}">',
'<h3 class="x-list-header"><div class="header">{group}</div></h3>',
'<div class="x-list-group-items">',
'{items}',
'</div>',
'</div>',
'</tpl>'
],
onItemDisclosure: function(record, btn, index) {
Ext.Msg.alert('Tap', 'Disclose more info for ' + record.get('firstName') + ' ' + record.get('lastName'), Ext.emptyFn);
},
listeners: {
itemtap: function(dataview, index, element, e) {
console.log('node is tapped');
},
itemswipe: function(dataview, index, element, e) {
console.log(element.select('.x-list-disclosure'));
}
},
store: store
});
(Added) This is the generated elements of {items}:
<div class="x-list-group-items">
<div class="x-list-item x-item">
<div class="x-list-item-body">Melvin Gilbert</div>
<div class="x-list-disclosure"></div>
</div>
<div class="x-list-item x-item">
<div class="x-list-item-body">Jeaffrey Gilbert</div>
<div class="x-list-disclosure"></div>
</div>
</div>
Any ideas?
Wrap your element variable with a call to Ext.fly and it will give you an Ext.Element representation of the dom element. The element variable is a DOM node rather than an Ext.Element instance. So it becomes Ext.fly(element).select('..')