Блог

В моем проекте я добавил TOC по главам, и мне нужно изменить, как я упоминаю ниже.

1. Я хочу установить флажок только первый флажок, значения которого свободны (по умолчанию он установлен).
2. Я хочу увеличить номер главы, когда я нажимаю на флажок. (путайте, как добавить значение I и его отображение, например, в главе 111, главе 112, главе 113)
3. Я хочу показывать и скрывать содержимое корзины, когда я нажимаю на флажок. (нажмите на флажок показать часть «Выбранное содержимое» и снимите флажок, затем он скроет эту часть)

home.componnet.html

 lt;section class="py-2"gt;  lt;div class="tab-content border border-info"gt;  lt;div id="Overview" class="container tab-pane active img-100"gt;  lt;brgt;  lt;h2 class="text-center head_line"gt; Overviewlt;/h2gt;  lt;div innerHTML="{{bb.Overview}}"gt; lt;/divgt;  lt;div innerHTML="{{bb.Short_description}}"gt; lt;/divgt;  lt;div innerHTML="{{bb.Description}}"gt; lt;/divgt;  lt;/divgt;  lt;!-- Table of content section is started --gt;  lt;div id="menu1" class="container tab-pane fade"gt;  lt;brgt;  lt;divgt;  lt;h5 class="text-center head_line"gt; Your cart contains following chapters lt;/h5gt;  lt;table class="table table-striped " border="1"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Chapter No lt;/thgt;  lt;thgt;Chapter Name lt;/thgt;  lt;thgt;Pricelt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;tr *ngFor="let d of idarr"gt;  lt;tdgt;  lt;bgt;Chapterlt;/bgt;  lt;/tdgt;  lt;tdgt;  lt;b innerHTML='{{d.Chapter_name}}'gt;lt;/bgt;  lt;/tdgt;  lt;tdgt;{{d.Chapter_price}}lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;tdgt;  lt;button class="btn btn-success" (click)="price_value_fun(getTotalAmount(idarr),4)" (click)="checkout(this.bb.Report_id,4)"gt;Buy Nowlt;/buttongt;  lt;/tdgt;  lt;tdgt;  lt;bgt;Total lt;/bgt;  lt;/tdgt;  lt;tdgt;   lt;bgt;{{getTotalAmount(idarr)}}lt;/bgt;  lt;/tdgt;  lt;/trgt;  lt;/tbodygt;  lt;/tablegt;  lt;/divgt;   lt;div class="text-right"gt; lt;/divgt;  lt;h3 class="text-center"gt; Table of Contentlt;/h3gt;  lt;h1 *ngFor="let s of toc_list"gt;{{s}}lt;/h1gt;  lt;table class="table table-striped " border="1"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Chapter No. lt;/thgt;  lt;thgt;Chapter Name lt;/thgt;  lt;thgt;Pricelt;/thgt;  lt;/trgt;  lt;tr *ngFor="let x of get_chapter_data"gt;  lt;td *ngFor=Chapter_pricegt;  lt;input type="checkbox" name="n" id="" [value]="x.Chapter_id" (change)="addId(this.x)" gt;  lt;bgt; Chapter {{x.Chapter_id}}lt;/bgt;   lt;/tdgt;  lt;tdgt;  lt;b innerHTML='{{x.Chapter_name}}'gt;lt;/bgt;  lt;brgt;  lt;p class="pl-3" innerHTML=' {{x.Chapter_sub_points}}'gt;lt;/pgt;   lt;/tdgt;  lt;tdgt;{{x.Chapter_price}}lt;/tdgt;  lt;/trgt;   lt;/theadgt;  lt;/tablegt;  lt;!--lt;div innerHTML=" {{bb.Table_Content}}"gt;  lt;/divgt;gt;--gt;  lt;/divgt;  lt;!-- request sample section is started --gt;  lt;/divgt;  lt;/sectiongt;  

главная страница.компонент.ts

 import { Component, OnInit } from '@angular/core'; declare var $: any; import { ActivatedRoute, Router } from '@angular/router';  import { ApiService } from '../services/api.service';   @Component({  selector: 'app-home-read-more',  templateUrl: './home-read-more.component.html',  styleUrls: ['./home-read-more.component.css'] }) export class HomeReadMoreComponent implements OnInit {  reportDetails: any;   constructor(private route: ActivatedRoute,  private router: Router,   private api: ApiService) {    this.api.setData(this.idarr);   }   id: any;  all_data: any;   threeReport: any;   toc_list: any;  get_val(allId: number) {  this.toc_list.push(allId);  this.total();  }  my_price: any;  total() {  let arr;  for (let a of this.toc_list) {  arr  = this.toc_list[a].Chapter_prise;  }  this.my_price = arr;  console.log(arr);  }  get_chapter_data: any;  get_chapter(id: number) {  this.api.chapter(id).subscribe((res) =gt; {  this.get_chapter_data = res;  });  }  new_chapter: any;    idarr: any = [];  addId(idno: any) {  if (!this.idarr.includes(idno)) {  this.idarr.push(idno);  //console.log(this.idarr);  } else {  var index = this.idarr.indexOf(idno);  if (index gt; -1) {  this.idarr.splice(index, 1);  // console.log(this.idarr);  }  }  }   getTotalAmount(selectedTOC: any[]): any {  if (!selectedTOC) {  return;  }  var total = 0;   selectedTOC.map((value) =gt; {  total = total   parseInt(value.Chapter_price);  });   return total;  }   arr: any = [1, 2, 3, 4, 5, 6, 7, 8, 9];    myNo: any;    ngOnInit() {   const jsonId = JSON.stringify(1);  localStorage.setItem('show', jsonId);   this.api.three_port().subscribe((res) =gt; {  this.threeReport = res;  });  this.idarr;   this.myNo = this.route.snapshot.params.no;   this.new_chapter;  this.get_chapter(this.route.snapshot.params.id);    //this.get_chapter(this.route.snapshot.params.id);  this.get_indeustry_id_related_data(this.route.snapshot.params.id);  this.all_data;  this.toc_list;  $(".pppp").hide();   }    get_indeustry_id_related_data(id: number) {  this.api.Indestry_data(id).subscribe((res) =gt; {  this.all_data = res;  });  }   /* code for checked */   price_value: any;  price_value_fun(value: number, id: number) {  console.log(value);  const jsonData = JSON.stringify(value);  const jsonId = JSON.stringify(id);  localStorage.setItem('show', jsonId);  localStorage.setItem('price', jsonData);  }  }