Блог

Я разрабатываю страницу в angular. Я не совсем знаком с angular. Я потратил несколько часов на работу над этим и просмотрел максимальное количество альтернативных потоков по этой проблеме. Но не смог найти решение, которое я искал.

в частности, я хочу подчеркнуть, что здесь я использую флажки начальной загрузки. Я не использую ng-bootstrap.

Вот запросы, которые я хотел бы адресовать, которые у меня возникают.

1. При загрузке страницы кнопки должны быть отключены, пока я не нажму на флажок.
2. Когда я нажимаю на флажок в заголовке таблицы, он должен включить все флажки в таблице и включить кнопки.
3. Когда я снял флажок в заголовке, он должен отключить все остальные флажки и отключить кнопки.

Ниже приведены детали, над которыми я работал над своей проблемой.

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');
             }
 

Я могу отключить кнопки при загрузке страницы. Но я не могу добиться этого, когда пытаюсь установить флажки. Я хотел бы знать, как я могу этого добиться?

При загрузке страницы кнопки должны быть отключены, пока я не нажму на флажок.

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

Код about решил проблему, из-за которой у меня отключен ng.