使用 ng-repeat 获取具有不同名称的相同按钮作为 ionic3 中的列表答案

【问题标题】：Get same buttons with different name as list in ionic3 using ng-repeat使用 ng-repeat 获取具有不同名称的相同按钮作为 ionic3 中的列表
【发布时间】：2018-02-14 01:18:09
【问题描述】：

我是 ionic 3 的新手，我尝试使用 ng-repeate 获取按钮列表。这些按钮仅与名称不同。这是我的html代码

<ion-content padding>
    <div ng-repeat="tip in healthTipsButtonList">
        <button ion-button (click)="presentActionSheet()" class="button button-dark clearButton" [color]="'secondary'">{{tip}}</button>
   </div>
</ion-content>

这是打字稿代码

@Component({
  selector: 'page-read',
  templateUrl: 'read.html',
})
export class ReadPage {
  healthTipsButtonList;
  constructor(public navCtrl: NavController,public actionSheetCtrl: ActionSheetController) {
  this.healthTipsButtonList = ["BEAUTY","FAMILY HEALTH","FITNESS TIPS","HEALTHY TIPS","PREGNANCY"];
}

presentActionSheet() {
  //some thing
}

但是我得到了这种类型的输出，没有任何错误。

这是我的离子环境详情

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.8
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2
System:
Node : v8.9.4
npm  : 5.6.0
OS   : Windows 8.1
Environment Variables:
ANDROID_HOME : not set

【问题讨论】：

ng-repeat属于angularjs，你应该使用*ngFor
这是 Angular 还是 AngularJS？ ng-repeat 是 AngularJS。
@DeborahK 这是有角度的。这里是详细信息 "@ionic/app-scripts": "3.1.8", "typescript": "2.4.2"

标签： html angular button angularjs-ng-repeat ionic3

【解决方案1】：

ng-repeat属于AngularJs，你必须使用*ngFor

更改以下代码

<div ng-repeat="tip in healthTipsButtonList">
    <button ion-button (click)="presentActionSheet()" class="button button-dark clearButton" [color]="'secondary'">{{tip}}</button>
</div>

到

<div *ngFor="let tip of healthTipsButtonList">
    <button ion-button (click)="presentActionSheet()" class="button button-dark clearButton" [color]="'secondary'">{{tip}}</button>
</div>

【讨论】：