时间戳

首页 > 解决方案 > 开关元素的 Nativescript 数组 | 点击按钮读取值的技巧

angular - 开关元素的 Nativescript 数组 | 点击按钮读取值的技巧

问题描述

设想：

在 Angular 中使用 Nativescript 5.0

  1. 我有来自 API (customers.component.ts) 的数据
  2. 渲染 n 个我从 API 获得的 ID。效果很好（customers.component.html）
  3. 用户点击开关做出选择，最后点击调用函数 saveData() 的保存按钮
  4. 在 saveData() 中，我无法读取检查了哪些开关。

我在下面的customers.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 ....");        
}
}

我期望的是，如果用户滑动开关，那么 selected 属性应该将其值更改为 observablearray 的一部分。

我能够按预期看到数据，API 数据通信没有错误，渲染完美。

标签： angulartypescriptnativescript

解决方案

实现期望的多种方法

  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.
    }
    }

  1. 为您的结果使用 ng 模型。检查例如

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

在你的 .ts 中

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

我创建了游乐场，您可以在那里测试功能。

推荐阅读