Question

我在理解一个简单的任务时遇到了一些麻烦，基本上我有一个像这样的控制器：

app.componet.ts

import { Component, ViewEncapsulation, Input } from '@angular/core';
import { Http } from '@angular/http';
import { FlexLayoutModule } from "@angular/flex-layout";
import * as io from "socket.io-client";
var b;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})

export class AppComponent {
  freqValue = [2,3];
  myData: Array<any>;
  autoTicks = false;
  invert = false;
  max = 15;
  min = 0;
  showTicks = true;
  step = 1;
  thumbLabel = true;
  vertical = true;
  color = 'primary';
  mode = 'determinate';
  //value = 50;
  socket : any;
  prova : any;
  @Input() valueSlider: number;

  constructor(){
    this.socket = io('localhost:3000');
      this.socket.on('value', function(a){
      b = a;
      console.log(a);
      console.log(b);
      this.valueSlider = b;
    });
  }
}

和这样的页面：的 app.component.html

...
  <div fxLayout="row wrap" class="nopad">
    <md-slider class="example-margin" [disabled]="disabled" [invert]="invert" [max]="max" [min]="min" [step]="step" [thumb-label]="thumbLabel"
      [tick-interval]="tickInterval" [value]="valueSlider" [vertical]="false" fxFlex="100%">
    </md-slider>
  </div>
...

我试图将valueSlider从我的TS传递给HTML作为<md-slider>的属性，但没有成功......有人能解释我吗？感谢

Answer 1

假设您正在使用Angular Material，那么您的一般逻辑应该可行。但是有两个想法，首先你的HTML属性的结构是奇怪的...... value={{valueSlider}}忽略了引号应该存在的事实，将它构造成[value]="valueSlider"可能会更好。

接下来，我想知道[disabled]="disabled"是否会引起一些问题。虽然可以禁用滑块，但文档（和源代码）并不会让我相信它是您可以修改的公共属性。

<强>已更新

我认为你有一个范围问题。

 constructor(){
    this.socket = io('localhost:3000');
      this.socket.on('value', (a) => {
      b = a;
      console.log(a);
      console.log(b);
      this.valueSlider = b;
    });
  }

将构造函数更改为上面的构造函数。使用术语function而不是lambda可能会阻止您编辑函数范围之外的valueSlider。

Answer 2

<强> app.component.html

<md-slider ... [value]="valueSlider"> ... </md-slider>

Angular 4：如何正确地将数据从组件传递到html

2 个答案:

<强>已更新