Question

此刻，我正在研究Laravel项目（使用Laravel Mix）。我尝试创建具有过滤器可能性的表。但是当我将此代码放入TS文件

import $ from 'jquery';
import 'bootstrap';

$(() => {
    if ( $('#documents-view').length > 0 ) {
        $("#myInput").on("keyup", function() {
            var value = $('in').val().toLowerCase();
            $("#myTable tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    }
});

我收到以下两个错误：

TS2339: Property 'toLowerCase' does not exist on type 'string | number | string[]'.   Property 'toLowerCase' does not exist on type 'number'.

和

TS2345: Argument of type '(this: HTMLElement) => void' is not assignable to parameter of type 'string | Element | JQuery<HTMLElement> | Element[] | ((this: HTMLElement, index: number, element: HTMLElement) => boolean)'.   Type '(this: HTMLElement) => void' is not assignable to type '(this: HTMLElement, index: number, element: HTMLElement) => boolean'.     Type 'void' is not assignable to type 'boolean'.

这是我的带有表的前端代码：

@extends('client-portal::layouts.default')
@section('content')
    <div id="documents-view" class="clients">
        <div class="clients-top">
            <div class="clients-top__logo">
                <img class="clients-top__image" src="{{ asset('vendor/client-portal/images/logo_CRVS.png') }}">
            </div>
            <div class="clients-top__title">Klantportaal</div>
        </div>
        @include('client-portal::navbar')
        <div class="clients-content">
            <div class="col-md-20 offset-md-1 p-3 p-md-5">
                <div class="container-fluid">
                    <div class="row">
                        <a class="btn btn-primary mb-3 border-white" href="#">
                            {{ __('Document toevoegen') }}
                        </a>
                        <input class="form-control mb-2" id="myInput" type="text" placeholder="Zoeken..">
                        @if($documents->isEmpty())
                            <p>Er zijn geen documenten bij ons bekend.</p>
                        @else
                            <table class="table table-striped table-bordered bg-white" style="width:100%">
                                <thead>
                                <tr>
                                    @foreach($data['documents'] as $document)
                                        <th>{{$document['name']}}</th>
                                    @endforeach
                                </tr>
                                </thead>
                                <tbody id="myTable">
                                @foreach($documents as $document)
                                    <tr>
                                        @foreach($document as $key => $item)
                                            @foreach($data['documents'] as $keyConfig => $reg)
                                                @if($key === $keyConfig)
                                                    <td>{{$item}}</td>
                                                @endif
                                            @endforeach
                                        @endforeach
                                    </tr>
                                @endforeach
                                </tbody>
                                <tfoot>
                                <tr>
                                    @foreach($data['documents'] as $document)
                                        <th>{{$document['name']}}</th>
                                    @endforeach
                                </tr>
                                </tfoot>
                            </table>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

我真的不知道这里出了什么问题，有人可以帮我吗？

Answer 1

在jQuery val() reutnn string | number | string[] | undefined;类型中。因此，您必须添加类型检查。例如：

var v = $('in').val();
var defaultValue = '';
var value = typeof v === 'string' ? v.toLowerCase() : defaultValue;

在过滤器功能中，它需要更多的参数以及更重要的返回值（您错过了它）。

但是根据您的代码，看起来您不需要过滤器功能，而是forEach。

$("#myTable tr").forEach(function() {
  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});

属性'toLowerCase'在'string |类型上不存在。编号|串[]'。属性“ toLowerCase”在类型“ number”上不存在

1 个答案: