Question

我正在查看前一篇文章，角度js 2用于计算矩形区域：我是角度2的新手，但是他试图复制应用程序，但是当执行时，我得到：无法加载资源错误：...通过开发人员控制台查看时：

以下是我如何安排我的设置：

typescript文件：app.componet.ts：

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Area of Rectangle';

onSubmit(f: NgForm) {
    console.log(f.value);  
    console.log(f.valid);

}

app.component.html ：

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  <div>
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      Length: <input [(ngModel)] = "length" /><br />
      Width: <input [(ngModel)] = "width" /><br />
      <button>Submit</button>
    </form>

  <p>Length value: {{ length.value }}</p>
  <p>Length valid: {{ length.valid }}</p>

  <p>Width value: {{ width.value }}</p>
  <p>Width valid: {{ width.valid }}</p>


  <p>Form value: {{ f.value | json }}</p>
  <p>Form valid: {{ f.valid }}</p>

  <p>The result is: </p> {{f.value.length * f.value.width}}</p>
  </div>

</div>

的index.html ：

<body>
  <app-root></app-root>
</body>

...我可以帮忙解决这个问题吗？

Answer 1

要使用相对路径，请设置组件的moduleID参数。请参阅下面的代码段：

@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

Answer 2

来自docs

NgForm指令补充了表单元素特征。它包含您为元素创建的控件 ngModel指令和名称属性，并监控其属性，包括其有效性。

您尚未添加name属性。这将导致以下错误

如果在表单标记中使用了ngModel，则为name属性必须设置或形式控制必须定义为“独立”和“独立”。在ngModelOptions
中

 <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      Length: <input  name="length" [(ngModel)] = "length" /><br />
      Width: <input name="width" [(ngModel)] = "width" /><br />
      <button>Submit</button>
    </form>

Angular 2无法加载资源错误：状态404

2 个答案: