Question

我有一个角度项目，我想将我的输入值之一传递给我的打字稿功能，但是当我console.log时，它不显示更新的值

<div class="form-group">
<input type="number" [name]="'sec_chlng'" (click)="func()" 
 placeholder="Security Challenge: {{a}}+{{b}}" class="form-control form- 
 control-lg"  required></div>

这是我的TS文件

import { Component, OnInit } from '@angular/core';
import {Input} from '@angular/core';

import { ElementRef } from '@angular/core';

@Component({
  selector: 'angly-signUp',
  templateUrl: './signUp.component.html',
  styleUrls: ['./signUp.component.scss']
})




export class SignUpComponent implements OnInit {

  a = Math.floor(Math.random() * 10) + 1 ;
  b = Math.floor(Math.random() * 10) + 1 ;
  c = this.a + this.b;
  @Input() sec_chlng :any;

  constructor(private elementRef: ElementRef) {
  }

  ngOnInit() {

  }

  func(){
    console.log(this.sec_chlng);
  }



}

如何更新值

Answer 1

您必须使用ngModel伪指令来实现此目的。此外，不要对(click)做出反应，而是对(change)做出反应，因为(change)在更改sec_chlng之后会被触发，而(click)则在之前被触发。如果(change)帮不上忙，请尝试(input)。

<input type="number" [(ngModel)]="sec_chlng" (change)="func()" 
placeholder="Security Challenge: {{a}}+{{b}}" class="form-control form- 
control-lg"  required>

也不要使用@Input。这还有另一个目的。

sec_chlng :any;

足够了。

编辑：

您需要将以下模块添加到您的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        RouterModule,
        BrowserModule,
        FormsModule,
        // ...
    ],
    // ...

无法将我的输入值传递给我的打字稿变量

1 个答案: