使用ng-repeat获取与ionic3中列表不同名称的相同按钮

Question

我是 ionic 3 的新手，我尝试使用 ng-repeate.These 按钮获取按钮列表，仅与名称不同。这是我的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

Answer 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>

使用ng-repeat获取与ionic3中列表不同名称的相同按钮

Get same buttons with different name as list in ionic3 using ng-repeat

html

button

angularjs-ng-repeat

ionic3

angular