Question

我想对角度为4的元素执行双向数据绑定，但是遇到了问题。谁能提供一些方向？

组件：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Load } from '../services/model/load';
import { LoadService } from '../services/api/load.service';
import {Observable} from 'rxjs/Observable';
@Component({
  selector: 'app-storeedit',
  templateUrl: './storeedit.component.html',
  styleUrls: ['./storeedit.component.css']
})
export class StoreeditComponent implements OnInit {
  load: Observable<Load>;
  private sub: any;
  constructor(private route: ActivatedRoute, private loadService: LoadService) { }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      // Require ID
      var loadId : number = +params['id'];
      this.fetchLoad(loadId);
    })
  }

  fetchLoad(loadid : number): void {
    this.load = this.loadService.apiLoadByIdGet(loadid);
  }

  ngOnDestroy() {
    //Called once, before the instance is destroyed.
    this.sub.unsubscribe();
  }
}

模板：

   <div>
        Cartons: {{(load | async)?.cartons}} <input type="range" [(ngModel)]="(load | async)?.cartons.value" max="1000" value="{{(load | async)?.cartons}}">     
    </div>

我希望在输入滑块上进行的更改能够反映在模型中。这一行：Cartons：{{（load | async）?. cartons}}显示当前值，但是当调整滑块时，该值似乎没有变化。

我也尝试过使用ngModelChange而没有运气。

有什么想法吗？

Answer 1

嗯，你不能在那里有管道，所以你必须将双向绑定分成两个单向绑定：

<input type="range" [ngModel]="(load | async)?.cartoons.value" (ngModelChange)="loadValueChange($event)">

现在，在您的组件中创建一个loadValueChange(newValue)方法，它将更新您的observable上的值。

Answer 2

感兴趣的是this.load对组件可见或应该是：

  fetchLoad= (loadid : number): void =>{
  this.load = this.loadService.apiLoadByIdGet(loadid);
  }

双向绑定单个对象可观察

2 个答案: