iOS Listview & InputFields

Bắt đầu với PMSubDetailsMooringsComponent.html và PMSubDetailsMooringsComponent.ts, tập trung vào các binding của ListView, itemTemplateSelector và DateTimePickerFields. Tái hiện hành vi trên iOS bằng ví dụ ba mục được cung cấp, sau đó so sánh chỉ mục được chạm với giá trị đã cập nhật. Hoàn thành khi trường được chọn luôn nhận đúng giá trị của chính nó và hành vi đã được xác minh trên iOS và Android.

Hello everyone;

I have a nativescript angular project that has a few DateTimePickerFields inside of some ListViews that behaves unreliably on iOS (android is completely fine).

Essentially, if i have a ListView with 3 separate DateTimePickerFields, and I tap&set the DTPF at position 0, a random other DTPF will get the value.

My knowledge with Nativescript & Angular is limited; so if I'm doing something wrong or if anyone has some tips/tricks i would be greatly appreciative.

(demo of app and issue)

(inputs on item of index 0 usually work; once we touched DTPF index 2, the value goes in DTF index1 and yeah...)

(simplified code)

PMSubDetailsMooringsComponent.html

  <ListView
      [items]="displayItems"
      [itemTemplateSelector]="selectItemTemplate"
    >
      <ng-template
        let-item="item"
        let-i="index"
      >
        <FlexboxLayout
          flexDirection="column"
        >
          <Label
            [text]="'index:'+ i"
          ></Label>

          <DateTimePickerFields
            [(ngModel)]="item"
            (touch)="yes(i)"
          ></DateTimePickerFields>
       </FlexboxLayout>
     </ng-template>
</ListView>

PMSubDetailsMooringsComponent.ts

export class PMSubDetailsMooringsComponent extends PMBaseComponent {
    displayItems: Date = {[null,null,null]}        
    index = -1;



 yes(i) {
        //just using this to display what value got touched
        this.index = i;
    }
}

"dependencies": {
"@angular-devkit/build-angular": "14.0.0",
"@angular/animations": "14.0.0",
"@angular/common": "14.0.0",
"@angular/compiler": "14.0.0",
"@angular/core": "14.0.0",
"@angular/forms": "14.0.0",
"@angular/platform-browser": "14.0.0",
"@angular/platform-browser-dynamic": "14.0.0",
"@angular/router": "14.0.0",
"@bezlepkin/nativescript-ar": "^1.0.4",
"@jeanbenitez/logical-expression-parser": "^1.0.0",
"@nativescript-community/drawingpad": "^4.1.0",
"@nativescript-community/ui-pulltorefresh": "^2.4.8",
"@nativescript/angular": "13.0.4",
"@nativescript/appversion": "^2.0.0",
"@nativescript/background-http": "^5.0.2",
"@nativescript/core": "8.2.5",
"@nativescript/datetimepicker": "2.1.11",
"@nativescript/fingerprint-auth": "^8.0.0",
"@nativescript/firebase": "^11.1.3",
"@nativescript/imagepicker": "^1.0.6",
"@nativescript/iqkeyboardmanager": "2.0.0",
"@nativescript/picker": "4.0.1",
"@nativescript/secure-storage": "^3.0.0",
"@nativescript/theme": "~3.0.0",
"@nstudio/nativescript-barcodescanner": "^5.0.1",
"@nstudio/nativescript-cardview": "2.0.1",
"@nstudio/nativescript-checkbox": "2.0.5",
"@nstudio/nativescript-filterable-listpicker": "^3.0.0",
"@ticnat/nativescript-searchable-select": "^1.0.7",
"crypto-browserify": "^3.12.0",
"moment": "^2.29.1",
"moment-timezone": "^0.5.34",
"nativescript-carousel": "^7.0.1",
"nativescript-localstorage": "^2.0.2",
"nativescript-mediafilepicker": "^4.0.2",
"nativescript-permissions": "1.3.11",
"nativescript-plugin-filepicker": "file:libraries/nativescript-plugin-filepicker-1.0.1.tgz",
"nativescript-ui-calendar": "^7.0.2",
"nativescript-ui-core": "5.0.1",
"nativescript-ui-gauge": "8.0.0",
"nativescript-ui-listview": "10.2.2",
"nativescript-ui-sidedrawer": "^10.0.1",
"stream-browserify": "^3.0.0",
"typescript": "4.6.4",
"zone.js": "0.11.5"
},
"devDependencies": {
"@angular/cli": "14.0.0",
"@angular/compiler-cli": "14.0.0",
"@nativescript/android": "8.0.0",
"@nativescript/ios": "8.3.0",
"@nativescript/schematics": "^11.0.0",
"@nativescript/types": "~8.1.0",
"@nativescript/webpack": "5.0.6",
"@ngtools/webpack": "14.0.0",
"@types/node": "^17.0.41",
"sass": "~1.39.0"
},