Angular 2動態設置輸入最大長度

Question

我想獲得服務輸入的最大長度（通過http調用獲取值）。

有沒有辦法通過只調用一次服務來做到這一點？

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

感謝

Answer 1

你可以得到最大的從服務的價值，並將其存儲在本地值，可以直接綁定到的元素。

請找到實例中的鏈接

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 2

在你component.ts

maxLenght:number = 0; 

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

然後在視圖

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

Answer 3

構造過程中使用的方法調用和更新組件變量

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

Answer 4

設置maxlength屬性值，其值在構造器或ngOnInit設置一個類屬性將使其停止呼叫服務了

HTML：

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

打字稿

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

DEMO