Question

我想从服务获取输入的最大长度（执行http调用以获取值）。

有没有办法只调用一次服务？

<input type="text" [attr.maxLength]="getMaxLength()/>

感谢

Answer 1

将maxLength属性值设置为类属性，该属性在contructor或ngOnInit中设置，将使其停止再调用该服务

<强> HTML：

<input type="text" [maxLength]="maxLength"/>

<强>打字稿

  maxLength: number;
  .....
  constructor(private myService: MyService){
    this.maxLength =  this.myService.getMaxLength();
  }

DEMO

Answer 2

您可以从服务中获取max的值，并将其存储在本地值中，并且可以直接绑定到该元素。

请在链接中找到示例

https://plnkr.co/edit/FX2DH96Femf02XwBUeCO

    @Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      Quantity (between 10 and 100):
      <input type="number" name="quantity" min="{{min}}" max="{{max}}">
      <br/>
      Name (max length - 10 character)
      <input type="text" name="name" [attr.maxLength]="maxTextLen">
    </div>
  `,
})
export class App {
  name:string;
  min : number;
  max : number;
  maxTextLen;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
    this.min = 10;
    this.max = 100;
    this.maxTextLen = 10;

  }
}

Answer 3

在component.ts

中

maxLenght:number = 0;

ngOnInit() {
  this.service.getMaxLength()
    .subscribe(max => {
      this.maxLenght = max;
     });
}

然后在视图中

<input type="text" [attr.maxLength]="maxLength"/>

Answer 4

在构造函数中使用方法调用并更新组件变量

constructor(private _http: Http) {
    this.getMaxLength().subscribe(data=>{
      console.log(data)
      this.maxLength= data;
      })

  }
  getMaxLength(): Observable<number> {
        return this._http.get(this._url)
            .map((response: Response) => response.json())
            .catch(this.handleError);
    }

<强> LIVE DEMO

Angular 2动态设置输入最大长度

4 个答案: