Angular2：[(ngModel)] with ion-select - 根据 select 值显示 div

Question

我正在使用 ionic2 和 angular2 以及 javascript（不是打字稿）我有 2 个输入：文本和 select。如果 select.val() == 'more'，我想隐藏输入文本。我该怎么做？

这是我的代码：

        <ion-item class="sq-p-input-price" *ngIf="typePriceMore()">
            <ion-label for="price" class="sr-only">Price</ion-label>
            <ion-input id="price" type="number" value="" placeholder="Price" required></ion-input>
        </ion-item>

        <ion-item class="sq-p-input-type">
            <ion-label class="sr-only" for="type">Tipo</ion-label>
            <ion-select [(ngModel)]="priceTypeModel" id="type" required>
                <ion-option *ngFor="#option of priceType"  value="{{option.value}}">{{option.key}}</ion-option>
            </ion-select>
        </ion-item>

#option 上的数组是：

    this.priceType = [
        {
            key: 'fixo',
            value: 'fix'
        },
        {
            key: '/hora',
            value: 'hourly'
        },
        {
            key: 'Preciso mais informação',
            value: 'more'
        },
    ]

除此之外还有2个想法我比较难完成：

1 - 为 select 设置初始值。使用 selected 不起作用，导致我在加载页面时始终为空。

2 - 当input.text（价格）被隐藏时，移除属性"required"。

谢谢:)

Answer 1

要在 ngModel 上设置初始值，您应该在 constructor()

中定义它

constructor(){
  priceTypeModel = 'more';
}

要隐藏一个元素，有两个选项

[hidden] 属性（如果 true，在元素上设置 display:none，保留在 DOM 中）

<ion-item class="sq-p-input-price" [hidden]="priceTypeModel === 'more'">

    <ion-label for="price" class="sr-only">Price</ion-label>
    <ion-input id="price" type="number" value="" placeholder="Price"></ion-input>
</ion-item>

*ngIf 指令（如果 false，从 DOM 中删除元素）

<ion-item class="sq-p-input-price" *ngIf="priceTypeModel !== 'more'">

    <ion-label for="price" class="sr-only">Price</ion-label>
    <ion-input id="price" type="number" value="" placeholder="Price"></ion-input>
</ion-item>

您应该在下面的例子中使用 *ngIf，它会从 DOM 中删除元素，因此不再需要 required 验证

2 - When the input.text (price) is hidden, to remove the attribute "required".

Angular2：[(ngModel)] with ion-select - 根据 select 值显示 div

Angular2: [(ngModel)] with ion-select - show div depending on select value

required

angular2-ngmodel

ionic2-select

angular