Listas angulares de 2 clasificables -- html campo con html5 campo con typescript campo con angular-bootstrap campo con angular-2+ camp codereview Relacionados El problema

Angular 2 sortable lists


2
vote

problema

Español

Escribí un proyecto simple y pequeño que presentan 3 botones, cada uno carga una lista diferente a la pantalla en el mismo lugar pero no en la misma hora.

En mi HTML, creo que tal vez pueda usar una forma más genérica para presentar las listas:

  <div>   <!-- list 1 button -->   <button md-button           (click)="showFirstList()"           class="md-primary">List 1   </button>    <!-- list 2 button -->   <button md-button           (click)="showSecondList()"           class="md-primary">List 2    </button>    <!-- list 3 button -->   <button md-button           (click)="ThirdList()"           class="md-primary">List 3    </button> </div>     <md-content>        <div *ngIf="showingListOne">         <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOneToDisplay | async">           <div class="list-bg" *ngFor="#item of listOneToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">             ID: {{item.id}} <p></p> name: {{item.name}}           </div>         </div><br><br>       </div>         <div *ngIf="showingListTwo">         <div dnd-sortable-container [dropZones]="['zone-two']" [sortableData]="listTwoToDisplay | async">           <div class="list-bg" *ngFor="#item of listTwoToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">             ID: {{item.id}} <p></p> age: {{item.age}}           </div>         </div>       </div>         <div *ngIf="showingListThree">         <div dnd-sortable-container [dropZones]="['zone-three']"  [sortableData]="listThreeToDisplay | async">           <div class="list-bg" *ngFor="#item of listThreeToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">             ID: {{item.id}} <p></p> age: {{item.age}}           </div>         </div> </div>       </div>      </md-content>   

ahora este es mi componente.ts. Sé que es horrible y me encantaría obtener sugerencias sobre cómo CI puede hacer que se vea mejor y no repetitivo. Específicamente, cómo puedo usar enumanos en lugar de los booleanos para que se vea mucho mejor, y donde debería poner las llamadas que hago por el servicio para obtener los datos. Es una llamada de API y no tiene sentido llamarlos a los tres cuando la clase está cargada.

Esta es mi clasificación-listas component.ts:

  @Component({   selector: 'sorting-lists',   styles: [require('./sorting-lists.css')],   directives: [DND_DIRECTIVES],   providers: [DND_PROVIDERS],   template: require('./sorting-lists.component.html') })  @Injectable() export class MyCmp implements OnInit {    listOneToDisplay  = this._myService.getFirstListData();   listTwoToDisplay = this._myService.getSecondListData();   listThreeToDisplay = this._myService.getThirdListData();    showingListOne = false;   showingListTwo = false;   showingListThree = false;    constructor(private _myService: MyService) {   };     public showFirstList(): void {     this.showingListOne = true;     this.showingListTwo = false;     this.showingListThree = false;   }    public showSecondList(): void {     this.showingListTwo = true;     this.showingListOne = false;     this.showingListThree = false;   }    public showThirdList(): void {     this.showingListThree = true;     this.showingListTwo = false;     this.showingListOne = false;   }  }   
Original en ingles

I wrote a simple and small projects that present 3 buttons, each one loads a different list to the screen on the same place but not in the same time.

In my HTML, I think I can maybe use some more generic way to present the lists:

<div>   <!-- list 1 button -->   <button md-button           (click)="showFirstList()"           class="md-primary">List 1   </button>    <!-- list 2 button -->   <button md-button           (click)="showSecondList()"           class="md-primary">List 2    </button>    <!-- list 3 button -->   <button md-button           (click)="ThirdList()"           class="md-primary">List 3    </button> </div>     <md-content>        <div *ngIf="showingListOne">         <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOneToDisplay | async">           <div class="list-bg" *ngFor="#item of listOneToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">             ID: {{item.id}} <p></p> name: {{item.name}}           </div>         </div><br><br>       </div>         <div *ngIf="showingListTwo">         <div dnd-sortable-container [dropZones]="['zone-two']" [sortableData]="listTwoToDisplay | async">           <div class="list-bg" *ngFor="#item of listTwoToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">             ID: {{item.id}} <p></p> age: {{item.age}}           </div>         </div>       </div>         <div *ngIf="showingListThree">         <div dnd-sortable-container [dropZones]="['zone-three']"  [sortableData]="listThreeToDisplay | async">           <div class="list-bg" *ngFor="#item of listThreeToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">             ID: {{item.id}} <p></p> age: {{item.age}}           </div>         </div> </div>       </div>      </md-content> 

Now this is my component.ts. I know it's horrible and I would love to get suggestions how cI can make it look better and not repetitive. Specifically, how I can use enums instead of the booleans to make it look much better, and where I should put the calls I do for the service to get the data. It's an API calls and it doesn't make sense to call them all three when the class is loaded.

This is my sorting-lists.component.ts:

@Component({   selector: 'sorting-lists',   styles: [require('./sorting-lists.css')],   directives: [DND_DIRECTIVES],   providers: [DND_PROVIDERS],   template: require('./sorting-lists.component.html') })  @Injectable() export class MyCmp implements OnInit {    listOneToDisplay  = this._myService.getFirstListData();   listTwoToDisplay = this._myService.getSecondListData();   listThreeToDisplay = this._myService.getThirdListData();    showingListOne = false;   showingListTwo = false;   showingListThree = false;    constructor(private _myService: MyService) {   };     public showFirstList(): void {     this.showingListOne = true;     this.showingListTwo = false;     this.showingListThree = false;   }    public showSecondList(): void {     this.showingListTwo = true;     this.showingListOne = false;     this.showingListThree = false;   }    public showThirdList(): void {     this.showingListThree = true;     this.showingListTwo = false;     this.showingListOne = false;   }  } 
              

Lista de respuestas

1
 
vote

Minimizar el estado del componente

Es mejor usar un solo campo listToShow en lugar de tener un campo 99887776665544334 por cada lista. No tiene que cambiar nada en su plantilla si envuelve el show*List() alrededor listToShow usando accessor sintaxis.

  private listToShow: number = 1; get showingListOne(): boolean { return this.listToShow === 1; }; get showingListTwo(): boolean { return this.listToShow === 2; }; get showingListThree(): boolean { return this.listToShow === 3; };  public showFirstList(): void {   this.listToShow = 1; }  public showSecondList(): void {   this.listToShow = 2; }  public showThirdList(): void {   this.listToShow = 3; }   

inyectable

Soy muy positivo, su componente no tiene que anotarse con @Injectable() , por lo tanto, no debe serlo. El componente no se está inyectando realmente en ninguna parte, ¿verdad?

 

Minimize component state

It's better to use a single field listToShow rather than having a show* field per each list. You don't have to change anything in your template if you wrap the show*List() around listToShow using accessor syntax.

private listToShow: number = 1; get showingListOne(): boolean { return this.listToShow === 1; }; get showingListTwo(): boolean { return this.listToShow === 2; }; get showingListThree(): boolean { return this.listToShow === 3; };  public showFirstList(): void {   this.listToShow = 1; }  public showSecondList(): void {   this.listToShow = 2; }  public showThirdList(): void {   this.listToShow = 3; } 

Injectable

I am very positive your component does not have to be annotated with @Injectable(), therefore it should not be. The component is not really being injected anywhere, right?

 
 

Relacionados problema

1  Compare múltiples valores de una matriz al mismo tiempo en JavaScript [CERRADO]  ( Compare multiple values of an array in the same time in javascript ) 
cerrado. Esta pregunta es off-topic . Actualmente no está aceptando respuestas. ¿Quieres ...

6  Control angular para ingresar latitud y longitud con validación  ( Angular control for inputting latitude and longitude with validation ) 
He construido un control personalizado para manejar la entrada del usuario en un formato legible por humanos, pero ahorre en un formato de máquina. Debe tene...

9  Formularios angulares 5 - extendiendo el control de la forma  ( Angular 5 forms extending form control ) 
Estoy tomando un primer pase a formas angulares con algunos colegas y notó un patrón de diseño interesante implementado por un compañero de trabajo donde el ...

3  Servicio angular 2 para cargar un trabajo por lotes y una encuesta para obtener resultados  ( Angular 2 service to upload a batch job and poll for results ) 
Tengo que escribir una interfaz web para uno de mis proyectos de Homebrew. Ya que no estoy familiarizado con HTML y CSS, he decidido tomar un marco de trabajo...

2  Angular ng-para escenario impar / incluso  ( Angular ng for odd even scenario ) 
Solo quiero crear una disposición vertical de mampostería con dos divisores size5 .card-derecha`. ¿Alguien tiene una idea de colocar size6 en la izquierda...

6  Reproductor de audio en Angular 2  ( Audio player in angular 2 ) 
Acabo de construir un reproductor de audio en Angular 2 usando un componente de reproductor y un servicio de jugador. Todo está funcionando bien, solo siento ...

3  Efectos simples en la aplicación Angular 2+ utilizando Firsebase, NGRX y RXJS  ( Simple effects in angular 2 application using firebase ngrx and rxjs ) 
Hizo una aplicación angular con Firebase, RXJS y NGRX. get_pool0 Estos son los efectos NGRX. Están activando una función reductora, luego llame a una fu...

0  Angular2 y RXJs pasan objetos con un servicio  ( Angular2 and rxjs passing objects around with a service ) 
Digamos que quiero compartir un objeto entre múltiples componentes. Este servicio permitirá que los componentes envíen o reciban el objeto. Esta funcionalid...

2  Efectos ngrx en aplicación angular  ( Ngrx effects in angular application ) 
@Effect() createQuiz$: Observable<Action> = this.actions$.pipe( ofType<quizAction.CreateQuiz>(quizAction.CREATE_QUIZ), switchMap((action) => { ...

2  Juego Simple TictoCtoe en TIPSCRIST  ( Simple tictactoe game in typescript ) 
Estoy preguntando principalmente si puedo simplificar el código. Me han dicho que es innecesariamente complicado. html: <div class="board"> <div id="tl...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos