Ionic 2中如何从REST API获取值设置文本域默认内容

嘿，我来帮你完善代码，实现从API拉取内容后自动填充到textarea当默认值的需求，一步步来：

1. 先把TypeScript代码捋顺 #

你现有的TS代码有几个小问题需要调整，不然可能会出渲染或者赋值异常：

• 初始化messageDraftList时，draft_mail改成空数组就行，不用放个空对象进去，避免不必要的渲染问题；
• API订阅后加个错误处理，万一请求失败也能知道问题出在哪；
• 记得在组件初始化的时候调用获取数据的方法，比如ngOnInit里。

修正后的TS代码参考：

// 先定义好数据结构，和API返回的保持一致
messageDraftList = {
  status: "",
  message: "",
  draft_mail: [] // 空数组初始化，避免*ngFor报错
};

// 获取草稿数据的方法
getMessageDraftData() {
  if (this.networkcheck.online) {
    this.dmessage.getMessageDraftData(this.uid).subscribe(
      (data) => {
        this.messageDraftList = data;
        console.log("草稿数据拿到啦:", data);
      },
      (err) => {
        console.error("获取草稿失败咯:", err);
        // 这里可以加个Toast提示用户，比如this.toastCtrl.create({message: '加载草稿失败'}).present();
      }
    );
  } else {
    console.log("现在离线啦，没法拿草稿哦");
    // 离线提示逻辑
  }
}

// 组件初始化时调用获取数据
ngOnInit() {
  this.getMessageDraftData();
}

2. HTML里绑定textarea的默认值 #

接下来在HTML里用[(ngModel)]做双向绑定，把API返回的草稿内容绑定到textarea上就行。假设你的draft_mail里的每个草稿对象有content字段存正文，subject存主题：

<!-- 遍历所有草稿 -->
<div *ngFor="let draft of messageDraftList.draft_mail">
  <!-- 把condition换成你实际的判断条件，比如选中了某个草稿的ID -->
  <div *ngIf="condition">
    <ion-label>Subject</ion-label>
    <ion-input type="text" [(ngModel)]="draft.subject" placeholder="输入主题"></ion-input>

    <ion-label>邮件内容</ion-label>
    <!-- 这里绑定draft.content，API返回后就会自动填充成默认值 -->
    <ion-textarea [(ngModel)]="draft.content" placeholder="输入邮件内容"></ion-textarea>
  </div>
</div>

几个要注意的小细节 #

• 数据结构要匹配：API返回的JSON结构必须和你的messageDraftList完全一致，不然数据没法正确赋值哦。比如draft_mail里的每个对象必须有你要绑定的subject、content这些字段；
• 处理空数据：如果API返回的草稿是空的，或者某个草稿的内容为空，你可以给textarea加个默认提示，比如：

  <ion-textarea [(ngModel)]="draft.content || '暂无草稿内容'" placeholder="输入邮件内容"></ion-textarea>
  

• 加载状态提示：因为API请求是异步的，数据没回来之前页面可能啥都不显示，加个加载提示会更友好：

  <div *ngIf="messageDraftList.draft_mail.length === 0">
    <ion-spinner name="crescent"></ion-spinner>
    <p>正在加载草稿...</p>
  </div>
  

这样设置完，当API请求成功拿到数据后，textarea就会自动填充对应的草稿内容作为默认值啦～

内容的提问来源于stack exchange，提问作者Mohammed Abdul kadhir