使用 MFP 8.0 验证用户后无法在单选按钮之间切换

Question

我正在使用 Cordova 6.5、Ionic 3.1.1 和 MObileFirst Foundation 8.0（服务器：8.0.0.00-20170220-1900 和客户端 SDK：8.0.2017033009)。我使用 ionic 的离子列表创建了一个 Yes/No 单选按钮，如下所示：

list.html

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
      <ion-list radio-group formControlName="wsQuestion1">
        <ion-item>
          <ion-label>Yes</ion-label>
          <ion-radio value="1"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label>No</ion-label>
          <ion-radio value="0"></ion-radio>
        </ion-item>
      </ion-list>
      <button type="submit" >Submit</button>
 </form>

以下是我用于登录的代码：

WLAuthorizationManager.login('UserLogin', data).then(
      () => {//success handler
          this.openNextPage();
      },
      () => {//failure handler
        console.log("Error handler");
        alert('ALERT_ERR_REQUEST_PROCESSING_FAILED');
      }
    );

如果我从 "Menu --> List" 导航到此页面，那么我可以在 Yes/No 之间切换，并且选择配给按钮。但是如果我输入 username/password ，点击登录，那么当我在身份验证后到达此页面时，我无法在比率按钮之间切换。

我创建了一个重现此场景的应用程序。你可以得到它 here.

为了重现，请执行以下操作：

下载、解压并导航到项目根目录
运行 npm install 在命令提示符下
运行 cordova platform add 在命令提示符下
运行 ionic serve 在命令提示符下
运行 cordova run android
当应用程序在设备上打开然后输入（测试为username/password）
您可以尝试点击 Yes/No 按钮。

这是它在我的设备中的样子：

Answer 1

此问题是由于离子代码中的线程计时引起的。已提出问题，可在此处找到：https://github.com/driftyco/ionic-native/issues/1547。作为临时解决方法，可以将 2 毫秒的小超时添加到函数 "checkandupdateview" 以确保正确更新视图。

更新不管ionic是否接受，这个问题仍然与MFP无关。这是一个线程计时，它也可能发生在任何插件上，而不仅仅是 MFP。不过，这里有一个解决方法，可以让您的代码运行仅在 离子代码 中有一个小的超时。

将 main.js 中的 "checkandupdateview" ionic 函数（将位于构建文件夹中）修改为以下代码段。如您所见，它所做的只是为 ionic 的视图渲染添加一个小的暂停。

function test2()
{
    setTimeout(function(){ 
    }, 1);  
}
/**
 * @param {?} view
 * @return {?}
 */
function checkAndUpdateView(view) {
    try{
    if( view.component.navCtrl._ids == 1 && view.component.navCtrl.id == "n4"
    )
    {
        test2();
    }            
    }catch(e){}
    Services.updateDirectives(view, 0 /* CheckAndUpdate */);
    execEmbeddedViewsAction(view, ViewAction.CheckAndUpdate);
    execQueriesAction(view, 33554432 /* TypeContentQuery */, 268435456 /* DynamicQuery */, 0 /* CheckAndUpdate */);
    callLifecycleHooksChildrenFirst(view, 1048576 /* AfterContentChecked */ |
        (view.state & 1 /* FirstCheck */ ? 524288 /* AfterContentInit */ : 0));
    Services.updateRenderer(view, 0 /* CheckAndUpdate */);
    execComponentViewsAction(view, ViewAction.CheckAndUpdate);
    execQueriesAction(view, 67108864 /* TypeViewQuery */, 268435456 /* DynamicQuery */, 0 /* CheckAndUpdate */);
    callLifecycleHooksChildrenFirst(view, 4194304 /* AfterViewChecked */ |
        (view.state & 1 /* FirstCheck */ ? 2097152 /* AfterViewInit */ : 0));
    if (view.def.flags & 2 /* OnPush */) {
        view.state &= ~2 /* ChecksEnabled */;
    }
    view.state &= ~1 /* FirstCheck */;
}

如果还有问题，请回复。

谢谢！

Answer 2

我将代码的登录部分更改为以下内容：

WLAuthorizationManager.login('UserLogin', data).then(
      () => {//success handler
        console.log("is angular zone ",NgZone.isInAngularZone());
          this.ngZone.run(()=>{
          console.log("is angular zone ",NgZone.isInAngularZone());
          this.openNextPage();
        });          
      },
      () => {//failure handler
        console.log("Error handler");
        alert('ALERT_ERR_REQUEST_PROCESSING_FAILED');
      }
    );

之所以会这样，是因为 WLAuthorizationManager 的“成功处理程序”运行在 Angular 区域之外，这就是未检测到更改的原因。

为了解决这个问题，我将“openNextPage”方法的调用包装到“this.ngZone.run(() => { ... })”中，然后它就完美地工作了。

使用 MFP 8.0 验证用户后无法在单选按钮之间切换

Unable to toggle between Radio Button after authenticating user using MFP 8.0

ibm-mobilefirst

ionic2