実現したいこと
ここに実現したいことを箇条書きで書いてください。
前提
TypeScriptでプロジェクトを登録したら進行中プロジェクトとして表示させるようなwebアプリを作っています。
app.tsの89行目で配列projectsの末尾の要素の値をリストとして追加表示し、画面上の「進行中のプロジェクト」として表示したいです。
しかし、[object Object]と表示されてしまうのですが、要素を表示させるにはどうすれば良いかわかりません。
また、app.ts内の46行目と47行目で以下のようなコードを実行したのですが、46行目と47行目でthis.projectObjectの値が異なる理由がわかりません。ご教授よろしくお願いいたします。
console.log("this.projectObject:" + this.projectObject) console.log(this.projectObject)
該当のソースコード
TypeScript
1$app.ts2 3interface Project {4 title: string;5 description: string,6 manday: string7}8 9class ProjectInput {10 templeteElement: HTMLTemplateElement;11 mainElement: HTMLDivElement;12 element: HTMLFormElement;13 title: HTMLInputElement;14 description: HTMLTextAreaElement;15 manday: HTMLInputElement;16 projectObject:Project[];17 18 constructor() {19 this.templeteElement = document.getElementById("project-input")! as HTMLTemplateElement;20 this.mainElement = document.getElementById("app")! as HTMLDivElement;21 const inputElement = document.importNode(this.templeteElement.content, true)22 this.element = inputElement.firstElementChild! as HTMLFormElement;23 24 this.attach();25 26 this.title = document.getElementById("title")! as HTMLInputElement;27 this.description = document.getElementById("description")! as HTMLTextAreaElement;28 this.manday = document.getElementById("manday")! as HTMLInputElement;29 this.projectObject = [];30 31 this.submitHandler()32 }33 34 private attach() {35 this.mainElement.insertAdjacentElement('afterbegin', this.element);36 }37 38 private getInputInfo(event:Event) {39 event.preventDefault();40 const titleValue = this.title.value;41 const descriptionValue = this.description.value;42 const mandayValue = this.manday.value;43 44 const project: Project = {title: titleValue, description: descriptionValue, manday: mandayValue};45 this.projectObject.push(project);46 console.log("this.projectObject:" + this.projectObject);47 console.log(this.projectObject)48 activeList.renderProjects();49 50 }51 52 private submitHandler() {53 this.element.addEventListener("submit", this.getInputInfo.bind(this));54 }55}56 57class ProjectList {58 templeteElement: HTMLTemplateElement;59 mainElement: HTMLDivElement;60 element: HTMLElement;61 62 constructor(status: 'active' | 'finished') {63 this.templeteElement = document.getElementById("project-list")! as HTMLTemplateElement;64 this.mainElement = document.getElementById("app")! as HTMLDivElement;65 const sectionElement = document.importNode(this.templeteElement.content, true);66 this.element = sectionElement.firstElementChild as HTMLElement;67 68 this.attach();69 this.renderContents(status);70 }71 72 private attach() {73 this.mainElement.insertAdjacentElement('beforeend', this.element);74 }75 76 private renderContents(status: 'active' | 'finished') {77 this.element.querySelector("ul")!.id = `${status}-project`;78 79 if(status === 'active') {80 this.element.querySelector("h2")!.innerHTML = "進行中プロジェクト";81 }else{82 this.element.querySelector("h2")!.innerHTML = "完了済プロジェクト";83 }84 }85 86 renderProjects() {87 console.log(input.projectObject);88 let projects = input.projectObject;89 document.getElementById("active-project")!.innerHTML += "<li>" + projects.slice(-1) + "<li>"; 90 }91}92 93const input = new ProjectInput();94const activeList = new ProjectList('active');95const finisshedList = new ProjectList('finished');96 97
TypeScript
1$index.html2 3<!DOCTYPE html>4<html lang="ja">5<head>6 <meta charset="UTF-8">7 <meta http-equiv="X-UA-Compatible" content="IE=edge">8 <meta name="viewport" content="width=device-width, initial-scale=1.0">9 <title>projectmanagement</title>10 <script src="../dist/app.js" defer></script>11</head>12<body>13 <template id="project-input">14 <form>15 <div class="form-control">16 <label for="title">タイトル</label>17 <input type="text" id="title" />18 </div>19 <div class="form-control">20 <label for="description">説明</label>21 <textarea id="description" rows="3"></textarea>22 </div>23 <div class="form-control">24 <label for="manday">人日</label>25 <input type="number" id="manday" step="1" min="0" max="10000" />26 </div>27 <button type="submit">プロジェクト追加</button>28 </form>29 </template>30 <template id="single-project">31 <li></li>32 </template>33 <template id="project-list">34 <section class="projects">35 <header>36 <h2></h2>37 </header>38 <ul></ul>39 </section>40 </template>41 <div id="app"></div>42 </body>43 </html>
0 コメント