Создание таблицы со встроенными редактируемыми ячейками с использованием Angular 6

В этой статье я собираюсь обсудить, как создать таблицу со встроенными редактируемыми ячейками. Как разработчик, вас попросили представить одно представление для презентации и редактирования контента из-за требований взаимодействия с пользователем. Недавно я работал над компонентом, который делает это, и расширил свой компонент до таблицы. Как внештатный дизайнер UX для проекта, я представил таблицу со встроенными редактируемыми ячейками и взял на себя задачу разработать ее.
С чем я собираюсь работать? Что ж, я собираюсь использовать Angular 6 и TypeScript для разработки компонента и использовать Angular CLI для создания каркаса приложения.

ng new inline-edit-app — style=scss

для стилизации здесь я использую BootStrap, но вы можете использовать любой другой фреймворк CSS. Чтобы использовать BootStrap, используйте команду ниже:

npm install bootstrap --save

теперь компакт-диск в каталог вашего приложения с:

cd inline-edit-app

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

ng g component inline-edit

Вышеупомянутая команда создает следующие файлы в папке вашего компонента:

встроенный-edit.component.html
встроенный-edit.component.scss
встроенный-edit.component.spec.ts
встроенный-edit.component.ts

В нашем новом компоненте нам просто нужен контейнер, который показывает ссылку с некоторым контентом, и после нажатия на ссылку мы хотим просто показать ввод для получения нового текста. После того, как ввод потерял фокус (щелкнув за пределами ввода или используя вкладку), мы хотим, чтобы ссылка была обновлена новым текстом. теперь позволяет открыть файл inline-edit.component.html в вашей среде IDE и заменить содержимое следующим образом:

<div>
  <div *ngIf="editing">
    <input [required]="required" (blur)="onBlur($event)" [name]="value" [(ngModel)]="value" [placeholder]="label" />
  </div>
  <div *ngIf="!editing">
    <a href="#" (click)="beginEdit(value)" (focus)="beginEdit(value)" tabindex="0">{{value}}</a>
  </div>
</div>

Пришло время добавить логику в наш пользовательский интерфейс. Откройте файл inline-edit.component.ts и замените содержимое приведенным ниже кодом.

import { Component, Input, ViewChild,Renderer,forwardRef } from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

const VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => InlineEditComponent),
  multi: true
};

@Component({
  selector: 'app-inline-edit',
  templateUrl: './inline-edit.component.html',
  providers: [VALUE_ACCESSOR],
  styleUrls: ['./inline-edit.component.scss']
})

export class InlineEditComponent implements ControlValueAccessor{
  @Input() label: string = "Enter value here"; 
  @Input() required: boolean = true; 
  private _value: string = ''; 
  private preValue: string = '';
  private editing: boolean = false; 
  public onChange: any = Function.prototype; 
  public onTouched: any = Function.prototype; 

  get value(): any {
    return this._value;
  }

  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this.onChange(v);
    }
  }

  writeValue(value: any) {
    this._value = value;
  }

  public registerOnChange(fn: (_: any) => {}): void {
    this.onChange = fn;
  }

  public registerOnTouched(fn: () => {}): void {
    this.onTouched = fn;
  }

  onBlur($event: Event) {
    this.editing = false;
    if ( this._value ==""){
      this._value = "No value available";
    }
  }

  beginEdit(value) {
    this.preValue = value;
    this.editing = true;
  }
}

Где label содержит текст для заполнителя, а required - это атрибут, который применяет требуемую проверку для ввода.

Следующим шагом будет включение компонента в ячейку таблицы. Итак, вернемся к «app.component.html» в папке приложения и добавим в него следующее:

‹Iframe src =” https://stackblitz.com/github/ramin-ahmadi/inline-edit-app?file=src%2Fapp%2Fapp.component.html 'width = ”100%” height = ”450px” ›‹/Iframe›

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

Чтобы загрузить приложение полностью, взгляните на мое репо на ‹a href="https://github.com/ramin-ahmadi/inline-edit-apppub'› Github ‹/a› или посмотрите, как оно работает на ‹A href=?hl=ru «https://stackblitz.com/github/ramin-ahmadi/inline-edit-app Фак'› StackBlitz ‹/a›

надеюсь, моя статья была полезной

Создание таблицы со встроенными редактируемыми ячейками с использованием Angular 6

Похожие вопросы