传递带有占位符的元素

Question

我是 Ionic 的新手，正在创建一段代码来为 select-box 生成选项。

我创建了一个 json 数组，其中包含国家代码等数据。

{
    "Countries":
              [
                {
                    "Country": "Nederland",
                    "Countrycode": "NL",
                    "Languagecode": "nl-nl"
                },{
                    "Country": "United Kingdom",
                    "Countrycode": "UK",
                    "Languagecode": "gb-en"
                },{
                    "Country": "Deutschland",
                    "Countrycode": "DE",
                    "Languagecode": "de-de"
                }
              ]
}

我创建了一个 for 循环，为每个国家/地区创建元素。该代码如下所示：

for (let index = 0; index < this.languages.Countries.length; index++) {
      if(this.languages.Countries[index].Languagecode !== undefined || this.languages.Countries[index].Country !== undefined){
        this.countryoptions += "<ion-select-option value="+this.languages.Countries[index].Languagecode+">"+this.languages.Countries[index].Country+"</ion-select-option>";
      }
    }

以上工作正常，它输出元素，当我直接复制和粘贴输出时，select-box 工作正常。但是当我使用 {{countryoptions}} 它会添加 "undefined ...OUPUT..." （OUTPUT 表示 for 循环的输出）然后 select-box 不起作用。我尝试使用 .replace(); 删除“”标记；但没有成功。

我也可以给出循环的输出，但我的问题已经主要是代码。所以我想我可以忽略它。如果没有让我知道:)

所以回顾一下我的问题：

如何通过占位符 {{}} 传递变量而不添加引号来分隔元素？

亲切的问候，罗伯特

Answer 1

您应该直接在 html 模板中实现循环。

<ion-select-option *ngFor="let country of languages?.Countries" [value]="country.Languagecode">
  {{country.Country}}
</ion-select-option>

假设你有对象 languages，其中包含一个名为 Countries 的属性，它是一个数组。

Observable 方式

如果您使用 http 检索您的值，您将得到一个 Observable<YourDataType>。如果是这样，您还应该使用角度内置 async 管道。

<ion-select-option *ngFor="let country of (languages$ | async)?.Countries" [value]="country.Languagecode">

传递带有占位符的元素

Pass elements with placeholders

ionic-framework

angular

ionic4