Question

我的问题是我必须用uid和name调用两个字符串的updateCard（）。但是，每次调用该函数时，名称都是不确定的或无效的。当按下udpate按钮时，将输入名称传递给函数的一种好方法。我知道该功能可以通过测试工作。我尝试了ngModel并将id传递给函数。

<div>{{card.name}}
            <form>
                Name: <input type="text" id = "name" [(ngModel)] = name><br>
                <input type="button" value="Update Name" (click)='bcService.updateCard(card.id, name)'>
            </form>
        </div>

Answer 1

您可以尝试将ngModelOptions添加为独立版本吗？

<input type="text" id = "name" [(ngModel)] = "name" [ngModelOptions]="{standalone: true}">

Answer 2

如果我在您的情况下，我会使用被动表格。 https://angular.io/guide/reactive-forms 更新你可以做这样的事情：

<div>
    <span>{{card.name}}</span>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        Name: <input type="text" id="name"><br>
        <input type="submit" value="Update Name">
    </form>
</div>

form:FormGroup=new FormGroup({
    id:new FormControl(""),
    name:new FormControl("")
  });

  constructor() { }

  ngOnInit() {
  }

  onSubmit(){
    this.bcService.updateCard(
      this.form.get("id").value,
      this.form.get("name").value
      );
  }

Answer 3

您不是要使用card.name吗？

<div>
    <span>{{card.name}}</span>
    <form>
        Name: <input type="text" id="name" [(ngModel)]="card.name"><br>
        <input type="button" value="Update Name" (click)="bcService.updateCard(card.id, card.name)">
    </form>
</div>

Answer 4

尝试此操作。使用如下的event.value

<input type="button" value="Update Name" (click)='bcService.updateCard(card.id, 
 event.value)'>

将输入传递给函数并在单击按钮时调用该函数

4 个答案: