diff --git a/components/textarea-item/demo/basic.ts b/components/textarea-item/demo/basic.ts
index d26d2855..ef3eda61 100644
--- a/components/textarea-item/demo/basic.ts
+++ b/components/textarea-item/demo/basic.ts
@@ -33,6 +33,8 @@ import { Component } from '@angular/core';
         <div class="am-list-body">
           <TextareaItem [title]="'高度自适应'" [autoHeight]="true" [labelNumber]="5">
           </TextareaItem>
+          <TextareaItem [editable]="false" [autoHeight]="true" [value]="readonlyValue">
+          </TextareaItem>
           <TextareaItem [rows]="3" [placeholder]="'fixed number of lines'">
           </TextareaItem>
         </div>
@@ -120,6 +122,8 @@ import { Component } from '@angular/core';
 export class DemoTextareaItemBasicComponent {
   value;
   error;
+  readonlyValue = 'This is a very very very very very very very very' +
+    ' very very very very very very very very very very long paragraph of read-only text';
   numberFocus = {
     focus: false,
     date: new Date()
@@ -135,7 +139,7 @@ export class DemoTextareaItemBasicComponent {
   };
   autoFocus = { focus: true, date: new Date() };
 
-  inputErrorClick(e) {}
+  inputErrorClick(e) { }
 
   clickFocus() {
     this.numberFocus = {
diff --git a/components/textarea-item/textarea-item.component.ts b/components/textarea-item/textarea-item.component.ts
index c6b83087..934d6cc4 100644
--- a/components/textarea-item/textarea-item.component.ts
+++ b/components/textarea-item/textarea-item.component.ts
@@ -1,6 +1,7 @@
 import {
   Component,
   OnInit,
+  AfterViewInit,
   Input,
   Output,
   EventEmitter,
@@ -25,7 +26,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
     }
   ]
 })
-export class TextareaItemComponent implements OnInit, AfterContentChecked, ControlValueAccessor {
+export class TextareaItemComponent implements OnInit, AfterContentChecked, ControlValueAccessor, AfterViewInit {
   prefixCls: string = 'am-textarea';
   wrapCls: object;
   labelCls: object;
@@ -196,19 +197,19 @@ export class TextareaItemComponent implements OnInit, AfterContentChecked, Contr
   @HostBinding('class.am-textarea-disabled')
   clsDisabled: boolean;
   @HostBinding('class.am-textarea-error')
-  clsError: boolean ;
+  clsError: boolean;
   @HostBinding('class.am-textarea-focus')
-  clsFocus: boolean ;
+  clsFocus: boolean;
   @HostBinding('class.am-textarea-item-single-line')
   clsSingleLine: boolean;
   @HostBinding('class.am-textarea-has-count')
-  clsHasCount: boolean ;
+  clsHasCount: boolean;
 
   constructor(private element: ElementRef, private render: Renderer2) {
     this._el = element.nativeElement;
   }
 
-  _onChange = (_: any) => {};
+  _onChange = (_: any) => { };
 
   setCls() {
     this.hasCount = this._count > 0 && this._rows > 1;
@@ -303,7 +304,7 @@ export class TextareaItemComponent implements OnInit, AfterContentChecked, Contr
     this._onChange = fn;
   }
 
-  registerOnTouched(fn: any): void {}
+  registerOnTouched(fn: any): void { }
 
   ngOnInit() {
     this.setCls();
@@ -311,6 +312,14 @@ export class TextareaItemComponent implements OnInit, AfterContentChecked, Contr
     this.textRef.nativeElement.value = this._value;
   }
 
+  ngAfterViewInit() {
+    setTimeout(() => {
+      if (this._autoHeight) {
+        this.reAlignHeight();
+      }
+    }, 100);
+  }
+
   ngAfterContentChecked() {
     if (this._autoHeight && this._focus) {
       this.reAlignHeight();