在 Table 如何在 angular 9 中启用和禁用带有按钮的 Bootstrap 复选框？

Question

我正在 angular 中开发一个页面。我对angular不是很熟悉。我花了几个小时研究它，并通过了关于此问题的最大数量的备用线程。但是找不到我正在研究的解决方案。

具体来说，我想在这里强调一下我使用的是 bootstrap 复选框。我没有使用 ng-bootstrap.

以下是我想解决的问题。

当页面加载时，按钮应该被禁用，直到我点击复选框。
当我单击 table 的 header 中的复选框时，它应该启用 table 中的所有复选框并启用按钮。
当我取消选中 header 中的复选框时，它应该禁用所有其他复选框并禁用按钮。

下面是我为我的问题所做的工作的详细信息。

MyPage.html

    <div id='bookstore'>
            <table  class="table table-responsive table-striped">
                <thead class="th-color">
                    <tr>
                        <th><input name="select_all_books" type="checkbox" ></th>
                        <th class="theading">Book ID</th>
                        <th class="theading">Book Name</th>
                        <th class="theading">From Date</th>
                        <th class="theading">To Date</th>
                        <th class="theading">No of Days</th>
                        <th class="theading">Apply Date</th>
                        <th class="theading">Reason</th>
                        <th class="theading">Book Status</th>
                       
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of bookstore | paginate: { itemsPerPage: pageSize, currentPage: p}">
                        <td><input type="checkbox" id="rowcheckedbookstore"></td>
                        <td> {{data.BookId }}</td>
                        <td>{{ data.BookName }}</td>
                        <td>{{ data.BookStart | date:'dd-MM-yyyy' }}</td>
                        <td>{{ data.BookReturn  | date:'dd-MM-yyyy' }}</td>
                        <td>{{ data.BookDays }}</td>
                        <td>{{ data.ApplyDate}}</td>
                        <td>{{ data.Reason }}</td>
                        <td>{{ data.BookStatus}}</td>                 
                    </tr>
                </tbody>
                </table>
                </div>

               <div class="row paginator">
                  <div class="col-md-7">
                    <p> Showing {{ ((p - 1) * pageSize) + 1 }} to {{ pageSize * p }} of {{collectionsize }} </p>
                 </div>
                <div class="col-md-5">
                    <pagination-controls (pageChange)="p = $event" ></pagination-controls>
                </div>
            </div>

            <div class="container" style="padding-top: 30px;">
                <div class="w3-show-inline-block">
               
                    <div class="w3-bar">
                        <button type="submit" id="allobook" class="btn btn-success" [disabled]="true" (click)="allowClick()" style="margin-right: 105px;float: right;">Allow</button>
               
                        <button type="submit"  id= "rejectbook" class="btn btn-danger" [disabled]="true" (click)="rejectClick()" style="float: right;margin-right: 35px;">Reject</button>
                    </div>
              
                </div>
            </div>

MyPage.ts

 export class MyPageComponent implements OnInit {
            
              page = 1;
             pageSize = 10;
               p: number = 1;
               collectionsize:any;
               count: boolean;
             
               
             bookslistdata:bookslist[];
               
               constructor (private bookslist: BookService) { }
             
               ngOnInit(): void {
                 this.bookslist.GetBooksData().subscribe(data=>{
                   this.bookslistdata = data;
                   this.collectionsize = data.length;
                })
              }
             allowClick(){
               alert('approve');
             }
             rejectClick(){
               alert('reject');
             }

我可以在页面加载时禁用按钮。但是当我尝试使用复选框时我无法实现。我想知道我怎样才能实现？

Answer 1

当页面加载时，按钮应该被禁用，直到我点击复选框。

<input disabled ng-disabled="name == '' || password == ''" type="submit" value="Log in" />

关于代码解决了我禁用 ng 的问题。

在 Table 如何在 angular 9 中启用和禁用带有按钮的 Bootstrap 复选框？

In Table How to enable and disable Bootstrap Checkboxes with buttons in angular 9?

html

javascript

typescript

bootstrap-4

angular9