Nativescript Массив элементов Switch | Трюки, чтобы прочитать значение в нажатие кнопки

Question

Сценарий:

Использование Nativescript 5.0 с Angular

1. У меня есть данные, поступающие из API (Customers.component.ts)
2. Отображение числа nИдентификаторы, которые я получаю из API.Отлично работает (customer.component.html)
3. Пользователь нажимает на переключатели, чтобы сделать свой выбор, и, наконец, нажимает кнопку «Сохранить», которая вызывает функцию saveData ()
4. В saveData () я не могупрочитайте, какие переключатели проверены.

Я попробовал ниже в customer.component.html, он прекрасно отрисовывается на основе данных, полученных от API.В этом нет ошибок.

<ListView [items]="_coursesmeta" [height]  = "_coursesmeta.length == 0 ? 30 : _coursesmeta.length * 70" class="list-group">
    <ng-template let-result="item">   
        <GridLayout rows="auto auto" columns="* *" class="m-5" verticalAlignment="stretch">
            <Label class="h3 m-15" [text]="result.coursename" textWrap="true" row="0" col="0"></Label>
            <Switch [id]="'switch[' + id + ']'" class="m-15" row="0" col="1" ></Switch>                
        </GridLayout>
    </ng-template>
</ListView>

Это
[id] = "'switch [' + id + ']'" это нормально?Есть ли способ прочитать, если какой-либо из коммутаторов проверен.

Коммутаторы создаются динамически на основе данных API.

** Правка - добавление кода ниже **

<ListView [items]="_coursesmeta" [height]  = "_coursesmeta.length == 0 ? 30 : _coursesmeta.length * 70" class="list-group">
          <ng-template let-result="item">   
          <GridLayout rows="auto auto" columns="* *" class="m-5" verticalAlignment="stretch">
          <Label class="h3 m-15" [text]="result.coursename" textWrap="true" row="0" col="0"></Label>
         <Switch [checked]="result.selected" class="m-15" row="0" col="1" ></Switch>               </GridLayout>
     </ng-template>
    </ListView>

и важной частью файла ts является

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { ActivatedRoute } from "@angular/router";

import { ObservableArray } from "data/observable-array";
import * as Permissions from "nativescript-permissions";
import { Coursemeta } from "../../shared/coursemeta.model";
import { CoursemetaService } from "~/app/shared/coursemeta.service";
var contacts = require( "nativescript-contacts" );

import { finalize } from 'rxjs/operators';

export class ContactManagerComponent implements OnInit {

    public constructor(private router: RouterExtensions, private route: ActivatedRoute, private _coursemetaservice: CoursemetaService) { }
    public _coursesmeta: ObservableArray<Coursemeta> = new ObservableArray<Coursemeta>([]); 

    ngOnInit(): void {                 
        this.callerName=this.route.snapshot.params["callerName"]; 
        this.callerNumber=this.route.snapshot.params["callerNumber"]; 
        this.input="";
        this._coursemetaservice.getCoursesmeta()
            .pipe(finalize(() => this._isLoading = false))
            .subscribe((coursesmeta: Array<Coursemeta>) => {
                this._coursesmeta = new ObservableArray(coursesmeta);       
                this.courseCount=this._coursesmeta.length;        
                this._isLoading = false;                 
            });        
    }

public ShowSelectedCourses()
{

    for(var i=0; i < this._coursesmeta.length; i++)
    {
        if(this._coursesmeta.getItem(i).selected == false)
        {
            alert("false = " + i);
        }    
    }
    alert("Saved ....");        
}
}

Я ожидаю, что если пользователь передвинет переключатель, то выбранное свойство должно изменить свое значение как часть observablearray.

Я могу видеть данные, как и ожидалось, нет ошибок в передаче данных API, отрисовка идеальна.

Answer 1

Множество способов достижения желаемого

1. Добавьте onSwitchChecked

и в вашем файле .ts обработайтеonSwitchChecked

    import { Switch } from 'ui/switch';
    public onSwitchChecked(args) {
            const sortSwitch = <Switch>args.object;
            if (sortSwitch.id === 'id of your swich') {
                if (sortSwitch.checked) {
// Change the _coursesmeta or result.selected here.
    }
    }

Используйте модель ng для вашего результата. Например,

<Switch [(ngModel)]='isSwitchChecked' (checkedChange)="onSwitchChecked($event)"></Switch>

и в формате .ts

 public onSwitchChecked() {
            alert(this.isSwitchChecked);
        }

Я создал игровую площадку ивы можете проверить функциональность там .

Answer 2

Я бы не рекомендовал использовать динамические идентификаторы. Кроме того, при использовании ListView не гарантируется, что все ваши переключатели / шаблоны активны, поскольку при прокрутке вверх и вниз один и тот же элемент будет перерабатываться с различными данными для сохранения производительности.

Таким образом, вы должны поиграть с данными здесь, привязать проверенное состояние Switch к свойству в элементе данных. Например

<Switch [checked]="result.selected" class="m-15" row="0" col="1" ></Switch>

Теперь вам просто нужно пройтись по массиву, чтобы найти, какой элемент выбран.