Question

花了几个小时才使这个简单的作品生效。复杂的数组可以正常工作，但是不理解为什么这个简单的代码无法呈现数据。使用nativescript 5.0

.ts文件

public _contact: ObservableArray<string>;

    ngOnInit(): void {         

    }

    public pickContact()
    {
        Permissions.requestPermissions([android.Manifest.permission.GET_ACCOUNTS, android.Manifest.permission.WRITE_CONTACTS, android.Manifest.permission.READ_PHONE_STATE], "Access to google account required!")
        .then(() => {
            contacts.getContact().then(function(args){
                if (args.response === "selected") {
                    console.log("arg response selected .... ");
                    var _contact = args.data;
                    var name_given = _contact.name.given == null ? "" : _contact.name.given;
                    var name_middle = _contact.name.middle == null ? "" : _contact.name.middle;
                    var name_family = _contact.name.family == null ? "" : _contact.name.family;
                    var _contactName= name_given + " " + name_middle + " " + name_family;    
                    var _contactPhone = _contact.phoneNumbers[0].value;
                    alert("Data = " + _contactName + " " + _contactPhone);
                    this._contact = new ObservableArray([
                        {name:_contactName, phone:_contactPhone}
                    ]);  

                }
            })                
        });
    }

.html文件

<StackLayout>
    <Button width="100" height="100" row="0" col="0" text="Refresh Calls" (tap)="pickContact()" horizontalAlignment="left" class="btn btn-rounded-sm m-20" style="background-color: rgb(60, 72, 179);color:white;font-weight:bold;"></Button>        
    <ListView [items]="_contact" height  = "270" class="list-group">            
            <ng-template let-result="item">
                <GridLayout rows="*,*" cols="" horizontalAlignment="left" verticalAlignment="top">
                    <Label row="0" col="0" [text]="result.name" class="h2 list-group-item lblThin" style="font-size:22;" (tap)="dialNumber(result.mobile)"></Label>
                    <Label row="1" col="0" [text]="result.phone" class="h4 list-group-item lblThin" (tap)="dialNumber(result.mobile)"></Label>                                                               
                </GridLayout>
            </ng-template>
        </ListView>
</StackLayout>

Listview中的高度为270（固定值），因为我希望此Listview中只有一条记录。联系人选择仅会选择一个联系人，其名称和号码将显示在列表视图中。警报显示正确的数据，但未呈现html中的数据。

除了上述渲染问题外，我想知道还有什么方法可以避免按钮调用pickNumber函数。我尝试了navigatingTo，ngOnInit并发现它们没有被执行。

Answer 1

此代码有些错误。

public _contact: ObservableArray<string>;

this._contact = new ObservableArray([
    {name:_contactName, phone:_contactPhone}
]);
/* { name: string, phone: string } is not of type 'string' */

此外，更新UI元素的API回调通常喜欢被告知要在哪个NgZone中进行操作。

然后，为了使事情更加混乱，您使用的是断开连接的function，从技术上讲，它不应引用您的任何this成员。

尝试一下：

class Contact: {
  constructor(public name: string, public phone: string) { }
}

@Component({ ... })
export class YourComponent {
  public contact$: Subject<Contact | null>;
  constructor(private zone: NgZone, ...) {
    this.contact$ = new BehaviourSubject<Contact | null>(null);
  }

  public pickContact() {
    Permissions. ...
      .then(() => {
        contacts.getContact().then((args) => {
          ...
          this.zone.run(() => {
            this.contact$.next(new Contact(contactName, contactPhone));
          }
        });
      });
  }
}

要进一步改善这一点，您可能需要在其中使用一些WeakRef，以确保在等待API调用时不会无限期地持有对象引用（导致内存泄漏）。

Nativescript可观察到的东西不正确

1 个答案: