首页 > 解决方案 > 单击添加按钮后,如何将我的文本区域的值设为空白,您能帮帮我吗?

问题描述

我正在尝试通过角度将我的 textarea 的值添加到我的 todolist 中,它可以工作,但是我不知道如何在将文本区域的值添加到我的列表后将其值变黑。在将其内容添加到我的待办事项列表后,我不知道我的 Teaxtarea 有多么空白,我真的很想知道如何做到这一点,
这是我的组件代码:

    import { Component } from "@angular/core";


@Component({
   selector: 'app-user',
   templateUrl: './user.component.html' 
})

export class UserComponent{
    currentVal="";
    
getVal(val)
{
console.warn('val')
this.currentVal=val



}

}
  and there is my html codes :

`enter code here`<body>
    <div class="row">
        <form>
            <div class="row col s6">

                <div class="input-field col s10">

                    <textarea #textarea1 class="materialize-textarea"></textarea>

                    <label for="textarea1">What needs to be done ?</label>
                </div>
            </div>
        </form>
        <br>
        <div class="row col s6">
            <a class="waves-effect waves-light btn" (click)="getVal(textarea1.value)" ><i class="material-icons left">add_circle</i>Add</a>
        </div>
    </div>


    <div class="row">
        <div class="row col s9">
            <ul class="collection with-header">
                <li class="collection-header">
                    <h4>Todo List</h4>
                  
                    <form>
                        <div class="input-field">
                          <input id="search" type="search" required>
                          <label class="label-icon" for="search"><i class="material-icons">search</i>Search</label>
                          <i class="material-icons">close</i>
                        </div>
                      </form>
                </li>
                <label>
                    <li class="collection-item">

                        <input type="checkbox" />
                        <span>{{currentVal}}</span>
                        <span><a href="#!" class="secondary-content"><i class="material-icons">delete</i><i
                                    class="material-icons">check_circle</i></a></span>
                    </li>

                </label>
              
                
               
            </ul>

        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>

标签: angular10

解决方案


推荐阅读