值不会更新Angular 7 TS

Question

更新：我的代码似乎没有使用新值（在输入字段“newVb”中写入的值）更新所选值。这就是'this.newVarde'未定义到'this.selectedVarde = this.newVarde'这一行。最后，它会添加一个新值，而不是更新所选值。但为什么，我不明白......

.TS

export class RightMenuComponent implements OnInit {

  public selectedVarde: this.selectedVarde;
  public newVarde: Varde;



  constructor(private _vardeService: VardeService) {
  }

updateVarde() {


    var beskrivning = this.selectedVarde;
    var newVarde = (<HTMLInputElement>document.getElementById('newVb')).value;


   this.varde = {

     Beskrivning: newVarde,
   }


    this.selectedVarde = this.newVarde;
    this._vardeService.updateVarde(this.varde).subscribe(() => { console.log("Lyckat") });


  }

然后我的.html：

<label for="updateVarde">T:Värdet som du vill uppdatera</label>
            <select [(ngModel)]="selectedVarde" id="selectedVarde" name="updateVarde" class="form-control" required >
              <option *ngFor="let varde of allaVarden" [ngValue]="varde">{{varde.beskrivning}}</option> 
            </select>
            <button type="button" class="btn btn-primary" (click)="updateVarde()" style="margin-left:4%;" data-toggle="modal" data-target="#vardeModal" data-dismiss="modal">T:Redigera valt värde</button>
            <label for="beskrivning">T:Nytt värde: </label>
            <input class="input" style="width:10%;" id="newVb" type="text">

感谢有关代码错误的任何提示

Answer 1

它是正确的，它是未定义的，因为你没有设置它的值。

这些是组件定义的属性/变量

public selectedVarde: Varde;
public newVarde: Varde;
public beskrivning: Varde;

然后，您在方法中定义并初始化了具有相同名称的新范围变量。

var beskrivning = this.selectedVarde;
var newVarde = (<HTMLInputElement>document.getElementById('newVb')).value;

this.varde = {
 Beskrivning: newVarde,
}

因此，您到达以下行this.newVarde仍未定义

this.beskrivning = this.newVarde;

编辑：

您可以使用已定义的变量，而不是创建新变量。

this.beskrivning = this.selectedVarde;
this.newVarde = (<HTMLInputElement>document.getElementById('newVb')).value;

this.varde = {
 Beskrivning: this.newVarde,
}

编辑2：

既然你的方法newVarde中的updateVarde没有引用你组件中的newVarde那么你必须在方法中声明并初始化它。

this.beskrivning = this.selectedVarde;
const newVarde = (<HTMLInputElement>document.getElementById('newVb')).value;

this.varde = {
 Beskrivning: newVarde,
}