I wrote following code:
slider.component.html
```
<div>
<input type="submit" class="submitSortable submit-btn mgt20 mgl10"
value="Send slider info">
<a href="topeventList.html" class="submit-btn02 mgt20 mgl10">Reset</a>
</div>
<div id="event-width" class="reg">
<ul> <!-- Line 7 is here -->
<li [ngClass]="[ event-box, { 'disabled':image.displayKbn === 0 } ]"
*ngFor="let image of images">
<div class="event-img">
<input type="hidden" name="eId[]" value="{{ image.id }}">
<img src="..{{ image.imagePath }}" width="130" height="61"
*ngIf="image.imagePath"><br>
</div>
<div class="event-upload">
<p class="event-link w360">Link(URL)<input type="text"
name="link[]" value="{{ image.eventUrl }}"></p>
<p><input type="file" name="file[]" value="Event image"></p>
</div>
<div class="disp-select">
<select name="displayKbn[]" class="select-box">
<option value="1" [selected]="image.displayKbn ===
1">enable</option>
<option value="0" [selected]="image.displayKbn ===
0">disable</option>
</select>
</div>
</li>
<li>
<button (click)="add()">add</button> <!-- This add event -->
</li>
</ul>
</div>
```
slider.component.ts
```
import { Component } from "@angular/core";
import * as moment from "moment";
declare const fetch: any;
@Component({
selector: "slider",
templateUrl: "app/slider.component.html",
})
export class SliderComponent {
images: any[];
constructor() {
const self = this;
fetch("/api/v1/topevent?sortby=sort&order=asc", {
method: "GET"
}).then(function(res) {
return res.text();
}).then(function(body) {
const json = JSON.parse(body);
self.images = json;
return Promise.resolve();
}).catch(function(err) {
console.error(err.toString());
});
}
add() {
this.images.push({
eventUrl: "",
imagePath: null,
sort: 5,
displayKbn: "1",
addDay: moment(),
updateDay: moment(),
openDay: moment(),
eventName: "event"
});
}
resort() {
// TODO
}
}
```
The component is successfully shown, but when I press "add" button,
following error is shown:
```
EXCEPTION: Error in app/slider.component.html:7:7 caused by: klass.trim is
not a function core.umd.js:3004:13
ORIGINAL EXCEPTION: klass.trim is not a function core.umd.js:3006:17
ORIGINAL STACKTRACE:core.umd.js:3009:17
NgClass</NgClass.prototype._toggleClass@http://localhost:3000/admin2/node_modules/@angular/common/bundles/common.umd.js:1280:21
NgClass</NgClass.prototype._applyIterableChanges/<@http://localhost:3000/admin2/node_modules/@angular/common/bundles/common.umd.js:1257:65
DefaultIterableDiffer</DefaultIterableDiffer.prototype.forEachAddedItem@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:3391:17
NgClass</NgClass.prototype._applyIterableChanges@http://localhost:3000/admin2/node_modules/@angular/common/bundles/common.umd.js:1257:13
NgClass</NgClass.prototype.ngDoCheck@http://localhost:3000/admin2/node_modules/@angular/common/bundles/common.umd.js:1231:21
anonymous/Wrapper_NgClass.prototype.detectChangesInInputProps@/CommonModule/NgClass/wrapper.ngfactory.js:36:5
anonymous/_View_SliderComponent1.prototype.detectChangesInternal@/SliderModule/SliderComponent/component.ngfactory.js:267:3
AppView</AppView.prototype.detectChanges@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:9305:13
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:9410:17
AppView</AppView.prototype.detectContentChildrenChanges@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:9323:17
anonymous/_View_SliderComponent0.prototype.detectChangesInternal@/SliderModule/SliderComponent/component.ngfactory.js:108:3
AppView</AppView.prototype.detectChanges@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:9305:13
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:9410:17
AppView</AppView.prototype.detectViewChildrenChanges@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:9331:17
anonymous/_View_SliderComponent_Host0.prototype.detectChangesInternal@/SliderModule/SliderComponent/host.ngfactory.js:31:3
AppView</AppView.prototype.detectChanges@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:9305:13
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:9410:17
ViewRef_</ViewRef_.prototype.detectChanges@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:7398:13
ApplicationRef_</ApplicationRef_.prototype.tick/<@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:6819:79
ApplicationRef_</ApplicationRef_.prototype.tick@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:6819:17
ApplicationRef_/<.next/<@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:6760:103
ZoneDelegate.prototype.invoke@http://localhost:3000/admin2/node_modules/zone.js/dist/zone.js:232:17
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:6206:32
ZoneDelegate.prototype.invoke@http://localhost:3000/admin2/node_modules/zone.js/dist/zone.js:231:17
Zone.prototype.run@http://localhost:3000/admin2/node_modules/zone.js/dist/zone.js:114:24
NgZone</NgZone.prototype.run@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:6096:55
ApplicationRef_/<.next@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:6760:73
EventEmitter</EventEmitter.prototype.subscribe/schedulerFn<@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:5952:40
SafeSubscriber.prototype.__tryOrUnsub@http://localhost:3000/admin2/node_modules/rxjs/Subscriber.js:223:13
SafeSubscriber.prototype.next@http://localhost:3000/admin2/node_modules/rxjs/Subscriber.js:172:17
Subscriber.prototype._next@http://localhost:3000/admin2/node_modules/rxjs/Subscriber.js:125:9
Subscriber.prototype.next@http://localhost:3000/admin2/node_modules/rxjs/Subscriber.js:89:13
Subject.prototype.next@http://localhost:3000/admin2/node_modules/rxjs/Subject.js:55:17
EventEmitter</EventEmitter.prototype.emit@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:5944:58
NgZone</NgZone.prototype.checkStable@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:6174:21
NgZone</NgZone.prototype.onLeave@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:6241:13
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:6209:25
ZoneDelegate.prototype.invoke@http://localhost:3000/admin2/node_modules/zone.js/dist/zone.js:231:17
Zone.prototype.runGuarded@http://localhost:3000/admin2/node_modules/zone.js/dist/zone.js:128:28
NgZone</NgZone.prototype.runGuarded@http://localhost:3000/admin2/node_modules/@angular/core/bundles/core.umd.js:6101:62
DomEventsPlugin</DomEventsPlugin.prototype.addEventListener/outsideHandler@http://localhost:3000/admin2/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:1638:78
ZoneDelegate.prototype.invokeTask@http://localhost:3000/admin2/node_modules/zone.js/dist/zone.js:265:21
Zone.prototype.runTask@http://localhost:3000/admin2/node_modules/zone.js/dist/zone.js:154:28
ZoneTask/this.invoke@http://localhost:3000/admin2/node_modules/zone.js/dist/zone.js:335:28
core.umd.js:3010:17
ERROR CONTEXT:core.umd.js:3013:17
Object { _view: Object, _nodeIndex: 0, _tplRow: 7, _tplCol: 7
}core.umd.js:3014:17
Error: Error in app/slider.component.html:7:7 caused by: klass.trim is not
a function
```
According to above error message, slider.component.html's line 7 is just
<ul> and I have no idea to do.
Error "klass.trim is not a function" looks happening inside Angular code,
and I guess this is Angular's bug.
Is this Angular's bug?
Is there any workaround?
Thanks in advance.
Jumpei
--
You received this message because you are subscribed to the Google Groups
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
