Блог

Главная - Вопросы по программированию - Угловой — Не удается найти имя «строка» в модальном обновлении

Угловой — Не удается найти имя «строка» в модальном обновлении

#angular

Вопрос:

В Angular-12 я реализую модальное редактирование из @tusharghoshbd ngx-datatable:

Обслуживание:

 public updateUser(id: number, user: IUser): Observable<any> {
  return this.http.put<IUser[]>(this.api.baseURL   'update/'   id, country, this.httpOptions);
}

Компонент:

 import {
  Component,
  OnInit,
  TemplateRef,
  ViewChild
} from '@angular/core';
import {
  SUserInfoService
} from '../suser-info.service';

@Component({
  selector: 'app-site-info',
  templateUrl: './site-info.component.html',
  styleUrls: ['./site-info.component.css']
})
export class SiteInfoComponent implements OnInit {
  @ViewChild('actionTpl', {
    static: true
  })
  actionTpl: TemplateRef < any > ;
  @ViewChild('addressTpl', {
    static: true
  })
  addressTpl: TemplateRef < any > ;
  @ViewChild('activeTpl', {
    static: true
  })
  activeTpl: TemplateRef < any > ;
  @ViewChild('idTpl', {
    static: true
  })
  idTpl: TemplateRef < any > ;

  isLoading: boolean = false;
  options: any = {};
  userInfoList: any[] = [];
  columns: any = {};

  constructor(private userInfoService: SUserInfoService) {}

  ngOnInit(): void {
    editCountry() {
      this.editForm = this.fb.group({
        id: [''],
        first_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(100)]],
        last_name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(100)]]
      });
    }
    this.options = {
      loader: true
    };
    this.columns = [{
        key: 'id',
        title: '<div class="blue"> ID</div>',
        width: 60,
        sorting: true,
        align: {
          head: 'center',
          body: 'center'
        },
        vAlign: {
          head: 'bottom',
          body: 'middle'
        },
        cellTemplate: this.idTpl
      },
      {
        key: 'first_name',
        title: '<div class="blue">First Name</div>',
        width: 100
      },
      {
        key: 'last_name',
        title: '<div class="blue">Last Name</div>',
        width: 100
      },
      {
        key: '',
        title: '<div class="blue">Action</div>',
        align: {
          head: 'center',
          body: 'center'
        },
        sorting: false,
        width: 80,
        cellTemplate: this.actionTpl
      }
    ];

    this.isLoading = true;
    this.userInfoService.getAllUserDetail().subscribe(
      data => {
        console.log(data);
        this.userInfoList = [data.results.user];

        this.options = {
          ...this.options,
          loader: false
        };
      },
      error => {
        this.isLoading = false;
      }
    );
  }
}

editUserModal(row: any) {
  console.log(row.id);
  console.log(row);
  this.editForm.controls['id'].setValue(row.id);
  this.editForm.controls['first_name'].setValue(row.first_name);
}

  submitEditForm() {
this.isSubmitted = true;

if (this.editForm.invalid) {
    return;
}

this.userInfoService.updateUser(row.id,this.editForm.value).subscribe(res => {
  this.data1 = res;
  this.tokenEditHandler(res);
  },
  error => {
    this.store.dispatch(loadErrorMessagesSuccess(error));
    this.isLoading = false;
  });
  this.isLoading = false;
   }

HTML:

 <ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="userInfoList" [columns]="columns"
  [options]="options">
  <ngx-caption>
    <div class="row">
      <div class="col-sm-6 col-xs-6 col-6 ">
        <b>
                  <i class="fa fa-table" aria-hidden="true"></i>
                  Site Info. List
              </b>
      </div>
    </div>
  </ngx-caption>

  <ng-template #idTpl let-rowIndex="rowIndex" let-row="row">
    {{rowIndex 1}}
  </ng-template>

  <ng-template #addressTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">

  </ng-template>
  <ng-template #actionTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
              <a class="btn btn-info btn-sm" (click)="editUserModal(row)" data-toggle="modal" data-target="#editUserModal">
                Edit
            </a>
  </ng-template>

  <ng-template #activeTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
    {{columnValue | toBoolean}}
  </ng-template>

</ngx-datatable>

Данные были загружены в модальную форму редактирования. Но я получил эту ошибку:

Не удается найти имя «строка»

row.id выделяется в:

this.userInfoService.UpdateUser(row.id,this.EditForm.значение).подписка(res => {

Как мне решить эту проблему?

Спасибо

Комментарии:

1. Проблема row в том, что переменная не существует внутри submitEditForm() . Тем временем, можете ли вы просмотреть свой исходный код, поскольку editCountry() метода не должно быть ngOnInit() . Вы можете просмотреть и обновить свой исходный код или создать Минимальный, воспроизводимый пример на StackBlitz . Спасибо.

Метки: