Как сделать так, чтобы данные отображались на подробной странице в Angular 2? - PullRequest
0 голосов
/ 26 апреля 2018

Backend

Я использовал работу Django RestFrame, реализованную концепцию "один-много", и мой вывод был похож на Backend Output

Фронтенд

Во внешнем интерфейсе я смог получить все данные, кроме tax_details.It просто возвращался как объект как этот.Front end Detailed page

На самом деле я новичок в этой концепции, поэтому не знаю, как с этим справиться.

HTML

<div class="row">
  <div class="col-md-12">
    <nb-card>
      <nb-card-header>
        <span>Product Details</span>
        <span style="padding-left:75%">
          <button (click)="onButtonClick()" class="btn btn-success btn-sm text-right">Edit</button>
        </span>
      </nb-card-header>
      <nb-card-body>
        <div class="row">
          <div class="col-sm-6">
            <div class="header">
              <div>
                <h6>Product Name</h6>
              </div>
              <div class="detail font-w-dark">{{update.pro_name}}</div>
            </div>
            <div class="header">
              <div>
                <h6>Category</h6>
              </div>
              <div class="detail font-w-light">{{update.category}}</div>
            </div>
            <div class="header">
              <div>
                <h6>Sales price</h6>
              </div>
              <div class="detail font-w-light">{{update.sales}}</div>
            </div>
            <div class="header">
              <div>
                <h6>Cost</h6>
              </div>
              <div class="detail font-w-light">{{update.cost}}</div>
            </div>
            <div class="header">
              <div>
                <h6>Quantity Type</h6>
              </div>
              <div class="detail font-w-light">{{update.type_units}}</div>
            </div>
            <div class="header">
              <div>
                <h6>HSN CODE</h6>
              </div>
              <div class="detail font-w-light">{{update.hsn}}</div>
            </div>
            <div class="header">
              <div>
                <h6>Description</h6>
              </div>
              <div class="detail font-w-light">{{update.description}}</div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="header">
              <div>
                <h6>Is Taxable</h6>
              </div>
              <div class="detail font-w-light">
                {{update.taxable}}</div>
            </div>
            <div class="header">
              <div>
                <h6>Is Details</h6>
              </div>
              <div class="detail font-w-light">
                {{update.tax_details}}</div>
            </div>                
          </div>
        </div>
      </nb-card-body>
    </nb-card>
  </div>
</div>

Component.ts

constructor(private themeService: NbThemeService,
              private route: ActivatedRoute,
              private breakpointService: NbMediaBreakpointsService,
              private service: ProductsService,
              private router: Router) {

    this.breakpoints = this.breakpointService.getBreakpointsMap();
    this.themeSubscription = this.themeService.onMediaQueryChange()
      .subscribe(([oldValue, newValue]) => {
        this.breakpoint = newValue;
      });
      this.route.params.subscribe(
        params => {
          this.user = params['id'];

        });


          this.service.get_update(this.user).subscribe(update => this.update = update,
                                                        error => console.log(error));


          this.service.get_updatetax(this.user).subscribe(update1 => this.update1 = update1,
                                                      error => console.log(error));

 this.update=([])
 this.update1=([])

  }

Здесь я упомянул мой HTML, Component.ts, а также выходные изображения. Пожалуйста, скажите мне, как получить эти данные.

Error

Ошибка2 Error2

1 Ответ

0 голосов
/ 26 апреля 2018
<div class="detail font-w-light">
   <div *ngFor="let el of update.tax_details"</div>
     <p> {{el.name}} {{el.percentage}} </p>
</div>

update.tax_details - это массив объектов, поэтому вам нужно перебрать его и извлечь необходимые поля

...