Question

我不确定如何正确地表达这个问题，所以我将展示核心代码，然后在下面描述我的问题。

<ion-searchbar 
        [(ngModel)]="autoc" 
        (ionInput)="updateSearch()" 
        (ionCancel)="dismiss()"
</ion-searchbar>
<ion-list>
    <ion-item *ngFor="let item of autocompleteItems" 
        {{ item.description }}
    </ion-item>
</ion-list>

每当搜索栏获得一个新值时，它就会调用updateSearch函数 - 这是有效的。在updateSearch函数中，我将数据推送到autocompleteItems数组中，我用它来列出数组中的每个项目（如上面的代码中所示）。这是updateSearch函数：

 updateSearch(){
    ...
     predictions.forEach(function (prediction) {              
        self.autocompleteItems.push(prediction);
     });
    }

我的问题是，在搜索栏中输入内容后，我的项目列表没有更新。我必须再输入一个字母或专注于搜索栏之外的内容。因此，当我键入＆＃34; Stackstreet 5＆＃34;时，它不会显示＆＃34; Stackstreet 5＆＃34;马上（它将显示＆＃34; Stackstreet＆＃34;，我将不得不添加一个额外的空间或类似的东西，以获得＆＃34;新更新＆＃34;。
总结一下：带有* ngFor =＆＃34;的离子项，让autocompleteItems＆＃34;没有更新onChange（ionInput），但updateSearch运行。所以我不得不以某种方式刷新/更新html中的列表。我该如何解决？

Answer 1

使用Promise修复。我怀疑这是Ionics的错 - 可能是Google API让我很难过。

无论如何，如果有人感兴趣，这里是我替换的代码。
[内部updateSearch（）]

  this.getPlacesBySearch()
            .then((predictions) => self.autocompleteItems = predictions)
            .catch(error => {
                self.autocompleteItems = [];
                console.log('error', error)
    })

像魅力一样！

使用<ion-searchbar>时，如何刷新列表（* ngFor）onChange

1 个答案: