我将分享在学习《Angular Web应用开发入门》初版时遇到的问题以及解决方法。

跌倒的原因 de

如果用一句话来概括，那就是版本的差异。在2018年4月这本书出版时，Angular的版本是5，而与此同时我的环境却使用的是12版本。

> ng version

Angular CLI: 12.1.4
Node: 16.2.0 (Unsupported)
Package Manager: npm 7.13.0
OS: darwin x64

Angular: 12.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.4
@angular-devkit/build-angular   12.1.4
@angular-devkit/core            12.1.4
@angular-devkit/schematics      12.1.4
@schematics/angular             12.1.4
rxjs                            6.6.7
typescript                      4.3.5

Warning: The current version of Node (16.2.0) is not supported by Angular.

可信赖的前辈

在这个博客中，有一个名叫DoError的作者解释了几个学习中的难点。对我来说，这些解释非常有帮助。

踌躇不前的关键点①：（属性）SimpleFormComponent.text1: string

在创建simpleform.components.ts（第108页）期间遇到了一个错误。根据书中的描述，text1: string;这行代码应该变成text1: string = “”;才能解决问题。

躓きポイント②: 在类型 ‘EventTarget’ 上不存在属性 ‘checked’。

通过将以下代码中带有负号的部分替换为正号，解决了第8章的问题。

- <input type = "checkbox" (change)="onCheckChanged(item, $event.target.checked)">
+ <input type = "checkbox" (change)="onCheckChanged(item, $event)">    

- onCheckChanged(item: string, isChecked: boolean) {
-  let formArray = <FormArray>this.coffeeForm.controls.adds;
-  if (isChecked) {
-    formArray.push(new FormControl(item));
-  } else {
-    let index = formArray.controls.findIndex(elm => elm.value == item)
-    formArray.removeAt(index);
-  }

+ onCheckChanged(item: string, e: Event) {
+   const checkbox = e.target as HTMLInputElement;
+ 
+   let formArray = <FormArray>this.coffeeForm.controls.adds;
+   if (checkbox.checked) {
+     formArray.push(new FormControl(item));
+   } else {
+     let index = formArray.controls.findIndex(elm => elm.value == item)
+     formArray.removeAt(index);
+   }

第三个困扰点：HTTP服务器无法启动。

以下是第11章的内容。我使用了http-server –baseDir=”dist/cookbook”来启动。我使用了不同于127.0.0.1:8080的地址。

这就是全部内容。感谢您阅读到最后。