Question

我在我的项目中使用ngx-chips插件。

现在使用Http调用服务器来填充下拉列表。

myContactList数据也会在视图中更新，但我看不到下拉列表。如果我再次键入一些文本，列表会显示出来。但是列表是旧的而不是最新请求的数据。

这也是此插件中注册的一个问题。 See issue here

我希望列表更新并显示，因为我收到响应代码服务器。

HTML：

<tag-input id="myAnchor"  [(ngModel)]='items' (onTextChange)="onTextChange($event)" [onlyFromAutocomplete]="true">
    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="myContactList">
        <ng-template let-item="item" let-index="index">
            {{ item.display }}
            <delete-icon (click)="input.removeItem(item, index)"></delete-icon>
        </ng-template>
    </tag-input-dropdown>
</tag-input>   

{{myContactList | json}}

TS：

onTextChange(text) {
    const data = {'Text': text};
    this.Service = this.myContactService.getSearchedContacts(data).subscribe(responseData => {
        this.myContactList = [];
        for (let index = 0; index < responseData.length; index++) {
            responseData[index].display = responseData[index].name;
            responseData[index].value = responseData[index].id;
            this.myContactList.push(responseData[index]);
        }
    });
}

Answer 1

像这样对我有用：

import React from 'react';
import { StyleSheet, View, Text, AsyncStorage, TouchableOpacity } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { getUsername } from '../actions';


export default HomeScreen = ({ navigation }) => {

    DisplayUsername = () => {
        var info = useSelector(state => state.login_info_reducer);
        if (Object.entries(info).length === 0 && info.constructor === Object) {
            AsyncStorage.getItem('username').then(name => {
                info.username = name;

                return info;
            });
        }
        else {
            return info;
        }
    }

    return (
        <View style={styles.container}>

            <TouchableOpacity onPress={() => { navigation.navigate('Friends') }}>
                <Text>Welcome {DisplayUsername()}</Text>
                <Text>Click Here</Text>
            </TouchableOpacity>
        </View>
    )
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

<tag-input   [(ngModel)]='items' (onTextChange)="change($event)" [onlyFromAutocomplete]="false">
<tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="preparedTags">
  <ng-template let-item="item" let-index="index">
    {{ item.display }}
    <delete-icon (click)="input.removeItem(item, index)"></delete-icon>
  </ng-template>
</tag-input-dropdown>

Answer 2

您可以在下面引用代码： HTML：

.pkg

.ts文件：

<tag-input name='tag2' [ngClass]="'tag-select'" theme='bootstrap'  
                                        [placeholder]="'Select Name +'" [secondaryPlaceholder]="'Select Name +'"
                                        [ngModel]="['Material']" [onlyFromAutocomplete]="true"  (onTextChange)="onTextChange($event)" (onSelect)="onSelectedre($event)" (onAdd)="onItemAddeder($event)"[editable]='true' (onTagEdited)="onTagEdited($event)">
                                        <tag-input-dropdown [appendToBody]="false" [displayBy]="'Name'" [identifyBy]="'id'"
                                          [autocompleteObservable]="requestAutocompleteItems "  (onAdd)="onItemAdded($event)"
                                          (onSelect)="onSelectedtag($event)" >
 </tag-input-dropdown>
 </tag-input>

Ngx-Chips - 自动填充列表在收到回复后未更新

2 个答案: