Question

我有一个过滤系统，该部分负责查找特定状态的项目。下面的代码工作正常，但是我必须根据请求将其更改为选择输入。

<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
              <li role="menuitem"><a (click)="changeFilterStatus(null)" class="dropdown-item">Kõik</a></li>
              <li role="menuitem"><a (click)="changeFilterStatus('active')" class="dropdown-item">Aktiivne</a></li>
              <li role="menuitem"><a (click)="changeFilterStatus('temporarily_inactive')" class="dropdown-item">Ajutiselt peatatud</a></li>
              <li role="menuitem"><a (click)="changeFilterStatus('inactive')" class="dropdown-item">Mitteaktiivne</a></li>
            </ul>

下面的代码使我很难受。带有[value]="null"的选项仍将HTTP请求发送到url/clients?status=null而不是url/clients。上面的代码运行良好，如果存在过滤器，则添加参数。如果为“ null”，则不应应用该过滤器并显示所有状态的项目。

<select (change)="changeFilterStatus($event.target.value)" class="form-control">
                <option [value]="null">Kõik</option>
                <option [value]="'active'">Aktiivne</option>
                <option [value]="'temporarily_inactive'">Ajutiselt peatatud</option>
                <option [value]="'inactive'">Mitteaktiivne</option>
            </select>

这是changeFilterStatus函数

changeFilterStatus(status) {
    if (this.filterStatus !== status) {
      this.filterStatus = status;
      this.filter.status = status;
      this.getFilteredClients();
    }
  }

Answer 1

您可以将选项值留空：

<option [value]="">Kõik</option>

Answer 2

为什么不null进行检查？

changeFilterStatus(status) {
    if (status && this.filterStatus !== status) {
      this.filterStatus = status;
      this.filter.status = status;
      this.getFilteredClients();
    }
  }

Answer 3

如果status为空，请不要发送status参数

您可以做类似的事情

changeFilterStatus(status) {
  // Status is null
  if(!status) { \\ Call the url as it is without status }
  else { \\ Call the url passing the status }
}

Answer 4

您可以使用ngModel

 <select [(ngModel)]="selectedValue" (change)="changeFilterStatus(selectedValue)" class="form-control">
                <option [value]="null">Kõik</option>
                <option [value]="'active'">Aktiivne</option>
                <option [value]="'temporarily_inactive'">Ajutiselt peatatud</option>
                <option [value]="'inactive'">Mitteaktiivne</option>
            </select>

Answer 5

在您的Web服务中：

import { Http, 
         Headers,
         RequestMethod,
         RequestOptionsArgs,
         Response }           from '@angular/http';
...
  webServiceCall(status) : Observable<Response> {
     if (len(status) > 0) { // Or status === "null" - I would change it to "" in markup too.
        let options:RequestOptionsArgs = {
           search : encodeParams(status);
        }
        result = this.http.request(url,options);
      } else {
        result = this.http.request(ur);
    return  result
  }

由于url/clients?status=

，其他答案可能会导致HTTP500

Answer 6

我用了这个：

  const {width: screenWidth, height: screenHeight} = 
   Dimensions.get('window');
    const width = screenWidth ;
    const height = screenHeight;

<View style={styles.DefaultView}>
          <ScrollView
           maximumZoomScale={1}
           minimumZoomScale={1}
           bouncesZoom={true}
           style={styles.scrollView}
           automaticallyAdjustContentInsets={true}
           pagingEnabled={true}
           horizontal={true}
           showsHorizontalScrollIndicator={false}
           onScroll={this._onScroll}
           contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}
           >
           {images.map((row, i) => (
              <View key={i}>
                  <Image
                      resizeMode='contain'
                      style={{width, height}}
                      source={{uri: row.src}}
                  />
              </View>
          ))}
           </ScrollView>
        </View>

const styles = StyleSheet.create({
    scrollView: {
        flex: 1,
        flexDirection: 'row',
    },
    DefaultView: {
        flex: 1,
        backgroundColor: '#000',
    },
});

我想我以前以字符串形式使用过它，因此使其无效。我有一个过滤器，可以根据参数是否为null向URL添加参数或从URL中删除参数。

角度发送null参数。不应该

6 个答案: