添加用户输入？

Question

您能在Angular中添加用户输入吗？每次更改输入时，我都试图在p标记中显示结果num +5。现在它显示随机值。

.html文件

    <input #box class = "textbox" type="text" name="Name" (change)="keyup(value)>
    <p>{{value}}</p>

.ts文件

@Injectable({
  providedIn: 'root'
})
@Component({
  selector: 'app-cp1',
  templateUrl: './cp1.component.html',
  styleUrls: ['./cp1.component.css']
})
export class cp1 implements OnInit {
  constructor() {}

  ngOnInit(): void {
  }

  keyup(num: number) {
    var asd = num + 5;
    this.value = asd;
  }
}

Answer 1

在.ts中声明一个变量

value:any

在.html中

<input [(ngModel)]="value">
<p>{{(+value)+5}}</p>

但我真的觉得你应该选一个英雄之旅。我知道它花了一些时间，但是给你一个关于角度的大致概念

Answer 2

难道不应该将this.value分配给asd而不是num吗？

Answer 3

您必须使用ngModel和ngModelChange。

模板：

<input
  #box
  class="textbox"
  type="text"
  name="Name"
  [(ngModel)]="name"
  (ngModelChange)="addValue()"
/>
<p>{{ name }}</p>
<p>{{ value }}</p>

TypeScript：

  name: String;
  value = 0;

  addValue() {
    this.value = this.value + 5;
  }