使用占位符传递元素

Question

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

我创建了一个包含国家代码等数据的 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>";
      }
    }

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

我也可以给出循环的输出，但我的问题主要是代码。所以我想我可以把它排除在外。如果不让我知道:)

回顾一下我的问题：

如何通过占位符 {{}} 传递我的变量而不添加破坏元素的引号？

亲切的问候， 罗伯特

Answer 1

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

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

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

可观察的方式

如果您使用 http 检索您的值，您将返回一个 Observable<YourDataType>。如果是这种情况，您还应该使用 angulars 内置 async 管道。

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