Създаване на таблица с вградени редактируеми клетки с помощта на 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

Горната команда създава следните файлове във вашата папка с компоненти:

inline-edit.component.html
inline-edit.component.scss
inline-edit.component.spec.ts
inline-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;
  }
}

Където етикетът съдържа текст за контейнер и е задължителен, това е атрибут, който прилага изискваното валидиране за входа.

Следващата стъпка е да включите компонента в клетка на таблица. Така че нека се върнем към „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-app'›Github‹/a› или вижте как работи на ‹a href=”https://stackblitz.com/github/ramin-ahmadi/inline-edit-app'›StackBlitz‹/a›

надявам се статията ми да е била полезна

Създаване на таблица с вградени редактируеми клетки с помощта на Angular 6

Подобни въпроси