段落沒有顯示在離子3的中心

Question

我正在學習離子，為此我遵循離子框架文件 。 如鏈接中所述，為了動態設置屬性，給出了示例

<div [attr.text-center]="isMD ? '' : null">I will be centered when isMD is true.</div> 。

但是，當我嘗試實現它時，它不起作用！ 既不在瀏覽器中也不在我的Android設備中。

<p [attr.text-center]="isMD ? '' : null"> paragraph in a center</p>

有誰知道為什么會這樣？ 我哪里做錯了？

編輯

我的.ts文件

import { Component } from '@angular/core';

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor() {

  }
}

Answer 1

p標簽保持不變。 你需要在.ts文件中添加isMD變量

import { Platform } from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor(public plt: Platform) {
    if(this.plt.is('android')){
      isMD= true;
    }else{
      isMD= false;
    }

  }
}

如果沒有這個過程，您可以使用ngClass通過另一個進程完成

在.scss中粘貼以下代碼

.center-text{
  text-align: center;
}

在.ts中粘貼以下代碼

import { Component } from '@angular/core';

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor() {
    isMD= true;
  }
}

在.html中粘貼以下代碼

<p [ngClass]="{'center-text': isMD}">paragraph in a center</p>

Answer 2

如果您默認希望文本顯示為居中對齊，只需將此屬性添加到您的p標記即可

<p text-center>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</p>

如果你想要一個動態行為，並根據某些條件你希望它顯示為居中對齊，那么你必須在控制器中創建一個變量並更改值true / false，並根據你的文本將出現居中對齊，以便

<p [attr.text-center]="yourVariable ? '' : null">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</p>

你的.ts文件

import { Component } from '@angular/core';

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  yourVariable:boolean;
  constructor() {
      yourVariable = true; // control your text alignment from here
  }
}

希望它可以幫助你