Question

我有一个纯组件将param对象作为输入并使用它来渲染Ionic中的表单。

在点击之前，表单看起来是空的。点击后，它会根据输入数据填充。

以下是一个示例：

@Component({
    selector: "my-pure-component",
    templateUrl: "template.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ObservationComponent {
    @Input()
    public param;
}

模板：

<ion-item-group id="toggleParameters">
    <ion-row align-items-center justify-content-center>
        <ion-col col-auto>
            <p ion-text color="neutral">{{param.notify ? 'yes' : 'no'}}</p> <!-- This works -->
        </ion-col>
        <ion-col no-lines>
            <ion-item detail-none no-lines>
                <ion-input [(ngModel)]="param.notify"></ion-input>  <!-- This also works -->
            </ion-item>
        </ion-col>
        <ion-col no-lines>
            <ion-item detail-none no-lines>
                <ion-toggle [(ngModel)]="param.notify"></ion-toggle> <!-- This doesn't -->
            </ion-item>
        </ion-col>
        <ion-col>
            <ion-datetime class="inputLike"
                          displayFormat="DD/MM/YYYY"
                          pickerFormat="DD MMM YYYY"
                          max="2100" min="2015"
                          cancelText="cancel"
                          doneText="ok"
                          [(ngModel)]="param.somedate"> <!-- Nor this -->
            </ion-datetime>
        </ion-col>
    </ion-row>
</ion-item-group>

父组件：

<my-pure-component [param]="{ notify: true, somedate: '2018-01-01' }">
</my-pure-component>

Answer 1

这是因为您使用了 ChangeDetectionStrategy.OnPush 通过从子组件中删除此ChangeDetectionStrategy.OnPush来使用默认更改检测机制。

ion-toggle和ion-datetime为空，直到被点击为止

1 个答案: