Angular code compilation failed after making changes for autocomplete tag in Appstream - AWS Blu Age L3 Workshop
0
While making the following code changes in the angular code, as mentioned in the workshop (step#4), for implementing the “auto-complete” feature, the angular code compilation failed.
Refer to error logs:
Code changes in comen01-comen1a.component.html
<dynamic-autocomplete [options]='getMenuOptions()' [id]='"option"' [size]=2 [line]=20 [column]=41 [(ngModel)]='option'></dynamic-autocomplete>
<!-- <dynamic-field [id]='"option"' [size]=2 [line]=20 [column]=41 [(ngModel)]='option'></dynamic-field> -->
Code changes in comen01-comen1a.component.ts
import { Option } from "../../dynamic-field/custom/dynamic-autocomplete.component";
export class OptionImpl implements Option {
constructor (value: string, label: string) {
this.value = value
this.label = label
}
value: string;
label: string;
}
getMenuOptions (): Option[] {
let menuOptions : Option[] = []
if (this.optn001 && this.optn001.value) menuOptions.push(new OptionImpl("01", this.optn001.value.trim()))
if (this.optn002 && this.optn002.value) menuOptions.push(new OptionImpl("02", this.optn002.value.trim()))
if (this.optn003 && this.optn003.value) menuOptions.push(new OptionImpl("03", this.optn003.value.trim()))
if (this.optn004 && this.optn004.value) menuOptions.push(new OptionImpl("04", this.optn004.value.trim()))
if (this.optn005 && this.optn005.value) menuOptions.push(new OptionImpl("05", this.optn005.value.trim()))
if (this.optn006 && this.optn006.value) menuOptions.push(new OptionImpl("06", this.optn006.value.trim()))
if (this.optn007 && this.optn007.value) menuOptions.push(new OptionImpl("07", this.optn007.value.trim()))
if (this.optn008 && this.optn008.value) menuOptions.push(new OptionImpl("08", this.optn008.value.trim()))
if (this.optn009 && this.optn009.value) menuOptions.push(new OptionImpl("09", this.optn009.value.trim()))
if (this.optn010 && this.optn010.value) menuOptions.push(new OptionImpl("10", this.optn010.value.trim()))
if (this.optn011 && this.optn011.value) menuOptions.push(new OptionImpl("11", this.optn011.value.trim()))
if (this.optn012 && this.optn012.value) menuOptions.push(new OptionImpl("12", this.optn012.value.trim()))
return menuOptions
}
NOTE: I am following the Self-Paced Troubleshooting Workshop and am currently at “Improvement >> User Experience”. https://catalog.workshops.aws/aws-blu-age-l3-certification-workshop/en-US/improvement/user-experience
2개 답변
- 최신
- 최다 투표
- 가장 많은 댓글
3
Here is the solution file. Maybe your OptionImpl class declaration is after @Component declaration and cause the issue.
import { Component } from '@angular/core';
import { Overlay } from "./../commonMap/overlay";
import { Option } from "../../dynamic-field/custom/dynamic-autocomplete.component";
export class OptionImpl implements Option {
constructor (value: string, label: string) {
this.value = value
this.label = label
}
value : string;
label: string;
}
@Component({
moduleId: module.id,
selector: 'comen01-comen1a',
templateUrl: './comen01-comen1a.component.html'
})
export class Comen01Comen1aComponent extends Overlay {
trnname: any = {};
title01: any = {};
curdate: any = {'value': 'mm\/dd\/yy'};
pgmname: any = {};
title02: any = {};
curtime: any = {'value': 'hh:mm:ss'};
optn001: any = {};
optn002: any = {};
optn003: any = {};
optn004: any = {};
optn005: any = {};
optn006: any = {};
optn007: any = {};
optn008: any = {};
optn009: any = {};
optn010: any = {};
optn011: any = {};
optn012: any = {};
option: any = {};
errmsg: any = {};
public FIELDS: string[] = ['trnname', 'title01', 'curdate', 'pgmname', 'title02', 'curtime', 'optn001', 'optn002', 'optn003', 'optn004', 'optn005', 'optn006', 'optn007', 'optn008', 'optn009', 'optn010', 'optn011', 'optn012', 'option', 'errmsg'];
public LINES: number[] = [1, 2, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 20, 23, 24];
ngAfterViewInit(): void {
}
getMenuOptions (): Option[] {
let menuOptions : Option[] = []
if (this.optn001 && this.optn001.value) menuOptions.push(new OptionImpl("01", this.optn001.value.trim()))
if (this.optn002 && this.optn002.value) menuOptions.push(new OptionImpl("02", this.optn002.value.trim()))
if (this.optn003 && this.optn003.value) menuOptions.push(new OptionImpl("03", this.optn003.value.trim()))
if (this.optn004 && this.optn004.value) menuOptions.push(new OptionImpl("04", this.optn004.value.trim()))
if (this.optn005 && this.optn005.value) menuOptions.push(new OptionImpl("05", this.optn005.value.trim()))
if (this.optn006 && this.optn006.value) menuOptions.push(new OptionImpl("06", this.optn006.value.trim()))
if (this.optn007 && this.optn007.value) menuOptions.push(new OptionImpl("07", this.optn007.value.trim()))
if (this.optn008 && this.optn008.value) menuOptions.push(new OptionImpl("08", this.optn008.value.trim()))
if (this.optn009 && this.optn009.value) menuOptions.push(new OptionImpl("09", this.optn009.value.trim()))
if (this.optn010 && this.optn010.value) menuOptions.push(new OptionImpl("10", this.optn010.value.trim()))
if (this.optn011 && this.optn011.value) menuOptions.push(new OptionImpl("11", this.optn011.value.trim()))
if (this.optn012 && this.optn012.value) menuOptions.push(new OptionImpl("12", this.optn012.value.trim()))
return menuOptions
}
}
답변함 2달 전
2
Hello,
What I understand from your modifications on the comen01-comen1a.component.ts file is that you put all modifications at the top of the file.
However, the getMenuOptions() method should be added inside the component, after the ngAfterViewInit. The expected skeleton looks like:
import ...
import ...
import { Option } from "../../dynamic-field/custom/dynamic-autocomplete.component";
export class OptionImpl implements Option {
...
}
@Component({
moduleId: module.id,
selector: 'comen01-comen1a',
templateUrl: './comen01-comen1a.component.html'
})
export class Comen01Comen1aComponent extends Overlay {
...
ngAfterViewInit(): void {
}
getMenuOptions (): Option[] {
let menuOptions : Option[] = []
if (this.optn001 && this.optn001.value) menuOptions.push(new OptionImpl("01", this.optn001.value.trim()))
if (this.optn002 && this.optn002.value) menuOptions.push(new OptionImpl("02", this.optn002.value.trim()))
if (this.optn003 && this.optn003.value) menuOptions.push(new OptionImpl("03", this.optn003.value.trim()))
if (this.optn004 && this.optn004.value) menuOptions.push(new OptionImpl("04", this.optn004.value.trim()))
if (this.optn005 && this.optn005.value) menuOptions.push(new OptionImpl("05", this.optn005.value.trim()))
if (this.optn006 && this.optn006.value) menuOptions.push(new OptionImpl("06", this.optn006.value.trim()))
if (this.optn007 && this.optn007.value) menuOptions.push(new OptionImpl("07", this.optn007.value.trim()))
if (this.optn008 && this.optn008.value) menuOptions.push(new OptionImpl("08", this.optn008.value.trim()))
if (this.optn009 && this.optn009.value) menuOptions.push(new OptionImpl("09", this.optn009.value.trim()))
if (this.optn010 && this.optn010.value) menuOptions.push(new OptionImpl("10", this.optn010.value.trim()))
if (this.optn011 && this.optn011.value) menuOptions.push(new OptionImpl("11", this.optn011.value.trim()))
if (this.optn012 && this.optn012.value) menuOptions.push(new OptionImpl("12", this.optn012.value.trim()))
return menuOptions
}
}
답변함 2달 전
No, it is not exactly the way I have put it here. I just wanted to highlight the component that I have added into the file. Rather, it is just the way you have suggested here.
import { Component, Inject } from '@angular/core'; import { Overlay } from "./../commonMap/overlay"; import { Option } from "../../dynamic-field/custom/dynamic-autocomplete.component"; (...) export class OptionImpl implements Option { constructor (value: string, label: string) { this.value = value this.label = label } value: string; label: string; } export class Comen01Comen1aComponent extends Overlay { (...) ngAfterViewInit(): void { } getMenuOptions (): Option[] { let menuOptions : Option[] = [] if (this.optn001 && this.optn001.value) menuOptions.push(new OptionImpl("01", this.optn001.value.trim())) if (this.optn002 && this.optn002.value) menuOptions.push(new OptionImpl("02", this.optn002.value.trim())) (...) if (this.optn012 && this.optn012.value) menuOptions.push(new OptionImpl("12", this.optn012.value.trim())) return menuOptions } }I missed the most important part when writing the skeleton, the decorator part:
@Component({ moduleId: module.id, selector: 'comen01-comen1a', templateUrl: './comen01-comen1a.component.html' })I updated my first answer. Is it this part which is missing on your side?
The decorator part was there but the sequence was incorrect, as pointed out in the previous comment. Thank you for the assistance.
Will try this and revert. Thank you.
It worked. thank you