Question

我在具有依赖下拉菜单和一些输入字段的表单上创建。我希望它在2个场景中工作

最初如果会话为null，则表单中应该没有数据，默认情况下所有字段都应为空。（我已创建）
如果有会话，那么我将从Web API中提取JSON格式的数据，然后我想相应填写字段。

     <ion-item>
        <ion-label>State</ion-label>
        <ion-select (ionChange)="setCountyValues(sState)" [(ngModel)]="sState" >
          <ion-option [value]="sState" *ngFor="let sState of states" [selected]="sState">{{sState.name}}</ion-option>
        </ion-select>
      </ion-item>
      <ion-item *ngIf="selectedCounties">
        <ion-label>Counties</ion-label>
        <ion-select (ionChange)="setCityValues(sCounty)" [(ngModel)]="sCounty">
          <ion-option [value]="sCounty" *ngFor="let sCounty of selectedCounties">{{sCounty.name}}</ion-option>
        </ion-select>
      </ion-item>
      <ion-item *ngIf="selectedCities">
        <ion-label>Cities</ion-label>
        <ion-select [(ngModel)]="sCity">
          <ion-option [value]="sCity" *ngFor="let sCity of selectedCities">{{sCity.name}}</ion-option>
        </ion-select>
      </ion-item>
      <ion-item *ngIf="selectedCities">
        <button ion-button round color="primary" (click)="clear()">Clear</button>
        <button ion-button round color="primary" (click)="goToOfficeDetail()">Office Detail Page</button>
      </ion-item>

<ion-item>
    <button ion-button round color="primary" (click)="Autofill()">Autofill</button>   </ion-item>

[{
    "PageRec":"AL005",
    "State":"AL",
    "County":"Autauga County",
    "CityTown":null,
    "Zip":null,
    "ShowRecordingInfo":"true",
    "Deed":{
        "Checked":"True",
        "Pages":"1",
        "ConsiderationAmount":"150000"
        },
    "MortgageDeed":{
        "Checked":"False",
        "Pages":null,
        "NewDebtAmount":null
        },
    "MortgageRefi":{
        "Checked":"False",
        "Pages":null,
        "NewDebtAmount":null,
        "OriginalDebt":null,
        "UnpaidDebt":null
        },
    "Assignment":{
        "Checked":"False",
        "Pages":null,
        "Assignments":null
        },
    "ReleaseSatisfaction":{
        "Checked":"False",
        "Pages":null,
        "ReleasesSatisfactions":null
        },
    "Questions":{
        "Question":{
            "Number":"Q4",
            "Category":"Deed",
            "Type":"bool",
            "Question Text":"Are the deed and ``mortgage being recorded at the same time?",
            "Answer":"1"
            }
        }
}]

.TS

   GetDocumentDetailsData()
  {
    this.zipcode.getDocDetails().then(data=>this.documentDetails=data); 
  }

 Autofill()
  {

    this.GetDocumentDetailsData();

     this.sState = this.documentDetails.State;

  }

我的问题是当我试图填写下拉菜单时，为什么显示问题说无法找到属性＆＃34; State＆＃34;未定义的

Answer 1

你有几个问题。您收到的是一个数组，因此documentDetails包含一个数组，因此无法找到documentDetails.State。因此，您需要将其更改为documentDetails[0].State

然后我就这样做了这个请求：

AutoFill() {
   this.zipcode.getDocDetails()
      .then(data=> {
         this.documentDetails=data;
         this.sState = this.documentDetails[0].state;
      }); 
}

然后出现下一个问题，Angular无法区分sState与name数组中对象中相应的states属性。所以你需要创建它的引用。这也意味着sState就像你的数组中的对象一样成为一个对象。

所以这也可以在回调中完成：

.then(data=> {
   this.documentDetails=data;
   this.sState = this.states.find(state => state.name == this.documentDetails[0].State)
});

这里是 DEMO （离子2）。我使用了Observables而不是Promises，但这并不重要;）

修改

如果是这样的话，那么您没有获得sState的预定义值，并且它是undefined，就像评论中提到的那样，它会勾选所有选项。我无法使用我作为演示使用的离子2（RC）版本重现该问题，但在离子3中它可以被复制。似乎解决这个问题的方法是将sState初始化为组件中的空对象：

sState = {};

Answer 2

您正在使用异步的承诺。您可以在您的案例中链接承诺，以确保在设置 this.sState时设置this.documentDetails 。

GetDocumentDetailsData() { return this.zipcode.getDocDetails().then(data=>{ this.documentDetails=data; return data;//return data to receive in the next then }); //return the promise } Autofill() { this.GetDocumentDetailsData().then(docDetails=>{ this.sState = docDetails.State; }). catch(err=>console.log(err));//all errors thrown in chain get caught }

如何操作ionic2中的.ts文件的下拉值？

2 个答案: