点击功能不显示确切数据

时间:2018-04-13 12:40:09

标签: html angular ionic-framework gridview ionic3

我有一行有两列作为网格视图来填充sevrver的日期。通过查看一切都很好。但是说我有2列4列。如下所示:

a   b
c   d

所以我的行上有一个点击功能,其中所选项目可以看作详细视图页面。但这里的问题是。例如,如果我选择第一行中的第一个网格单元格。那是'A'。然后在详细页面中显示关于'A'的所有细节

如果我选择'B',那么同样在详细屏幕中它仅显示为'A'网格单元数据。它显示所有关于'A'的数据。

我尝试的事情:

打印点击功能。如果我选​​择“A”,则A显示。如果我选​​择“B”,那么也选择点击功能“A”仅显示数据。

这是我的代码:

<ion-grid no-padding>
      <ion-row no-padding *ngFor="let item of Data;let i=index" (click)="showDetails(item)">
      <ng-container *ngIf="i % 2 == 0">
        <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i < Data.length">
            <ion-card no-margin>          
              <div gallery-title>
              <h2 item-title text-wrap text-center>{{Data[i].ProductName}}</h2>
              </div>
            </ion-card>
          </ion-col>
          <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i+1  < Data.length">
            <ion-card no-margin>         
            <div gallery-title>
              <h2 item-title text-wrap text-center>{{Data[i+1].ProductName}}</h2>
              </div>
            </ion-card>
          </ion-col>
      </ng-container>
      </ion-row>
    </ion-grid>

任何帮助。我不知道我在这里做错了什么。

提前致谢!!

3 个答案:

答案 0 :(得分:1)

如果我理解这一点,看起来好像你正在迭代数据四次,但只是实际输出了两行(你的/** * Copyright (c) 2015-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ #import "AppDelegate.h" #import <CodePush/CodePush.h> #import <React/RCTBundleURLProvider.h> #import <React/RCTRootView.h> #import "RNFIRMessaging.h" #import <FBSDKCoreKit/FBSDKCoreKit.h> @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { NSURL *jsCodeLocation; #ifdef DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; #else jsCodeLocation = [CodePush bundleURL]; #endif RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"cupido" initialProperties:nil launchOptions:launchOptions]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; [self.window makeKeyAndVisible]; // Added for FCM [FIRApp configure]; [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self]; [[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions]; return YES; } - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler { [RNFIRMessaging willPresentNotification:notification withCompletionHandler:completionHandler]; } #if defined(__IPHONE_11_0) - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler { [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler]; } #else - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void(^)())completionHandler { [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler]; } #endif //You can skip this method if you don't want to use local notification -(void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification { [RNFIRMessaging didReceiveLocalNotification:notification]; } - (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{ [RNFIRMessaging didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler]; } - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options { BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application openURL:url sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey] annotation:options[UIApplicationOpenURLOptionsAnnotationKey] ]; // Add any custom logic here. return handled; } - (void)applicationDidBecomeActive:(UIApplication *)application { [FBSDKAppEvents activateApp]; } @end 导致你失去了对{{1}的两个访问权限}}第

所以你在第一次通过时输出B的列,在这种情况下,项目实际上仍然是项目A.

由于Ionic列的工作方式,您可能不需要像这样编写它。请尝试以下方法:

*ngIf="i % 2 == 0"

你只会有一行,但是应该按照你想要的方式运行。

答案 1 :(得分:1)

简单地将点击放在ion-col中,你需要的是在showDetails函数中传递带索引的数据数组

<ion-grid no-padding>
      <ion-row no-padding *ngFor="let item of Data;let i=index" (click)="showDetails(item)">
      <ng-container *ngIf="i % 2 == 0">
        <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i < Data.length" (click)="showDetails(Data[i])">
            <ion-card no-margin>          
              <div gallery-title>
              <h2 item-title text-wrap text-center>{{Data[i].ProductName}}</h2>
              </div>
            </ion-card>
          </ion-col>
          <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i+1  < Data.length" (click)="showDetails(Data[i+1])">
            <ion-card no-margin>         
            <div gallery-title>
              <h2 item-title text-wrap text-center>{{Data[i+1].ProductName}}</h2>
              </div>
            </ion-card>
          </ion-col>
      </ng-container>
      </ion-row>
    </ion-grid>

答案 2 :(得分:0)

您绑定的点击事件位于行而不是列。我建议将click事件移动到 <!DOCTYPE html> <html> <body> <?php if (isset($_POST['txt'])) { $veggies = array("Potato", "Cucumber", "Carrot", "Orange", "Green Beans", "onion"); $fruits = array("Apple", "Banana", "orange", "Pineapple", "Grapes", "Watermelon"); $salad = array_merge ($veggies, $fruits); $Object = $_POST['txt']; $search = array_filter($salad, function($list) use ($Object) { return ( stripos($list, $Object) !== FALSE ); }); print_r($search); // echo '<pre>' . print_r($search) . '</pre>'; } else { echo " Nothing entered into the Search Item field "; } ?> <form method="POST"> Search item: <input type="text" name="txt" ><br> <br> <input type="submit"> </form> </body> </html> 元素。