Neste capítulo, aprenderemos a usar o Angular2 para mostrar dados e como usar suas instruções internas NgFor e NgIf
Primeiro, verifique se você tem um programa de amostra Angular2 que pode ser executado. É melhor ser o pequeno projeto rápido que concluímos no capítulo anterior ou o pequeno projeto rápido que você concluiu de acordo com as etapas acima do site oficial, porque nossas explicações são baseadas nessa base; Então vamos começar a seguinte jornada feliz.
Como nossa série de artigos usa TypeScript , antes de ler o conteúdo a seguir, você também pode observar os tipos de TypeScript ou ES6. Seus URLs são TypeScript e ES6. Se você aprendeu idiomas semelhantes orientados a objetos, como Java ou C ++ antes, será fácil aprender as aulas aqui; As aulas aqui são basicamente semelhantes às desses idiomas.
Na seção anterior, exportamos uma classe vazia em app.component.ts , por isso precisamos começar a preenchê -la para torná -la cheia. Primeiro, adicionamos três atributos à classe AppComponent (componente), nome, idade, frutas; Assim como o seguinte:
classe de exportação appComponent {userName = 'Dreamapple'; idade = 22; Fruit = 'Apple'}O método de escrita acima é na verdade apenas uma forma de abreviação, mas o método completo de escrita deve ser o seguinte:
classe de exportação appComponent {// nome de usuário = 'dreamapple'; // idade = 22; // fruit = 'Apple' nome de usuário: string; idade: número; frutas: cordas; construtor () {this.username = 'dreamapple'; this.age = 22; this.fruit = 'Apple'; }}Então temos que modificar nosso modelo, porque temos que usar mais HTML no modelo, para que tenhamos que usar backticks para embrulhar nossos fragmentos HTML; Nossa função decoradora é a seguinte:
@Component ({Selector: 'My-App', Modelo: `<p> Meu nome é: {{UserName}} </p> <p> Minha idade é: {{Age}} </p> <p> Minha fruta favorita é: {{fruta}} </p>`})Obviamente, também podemos usar as opções de configuração do modelo do objeto de metadados na função Decorator, como mostrado abaixo:
@Component ({Selector: 'My-App', // Modelo: `// <p> Meu nome é: {{nome de usuário}} </p> // <p> Minha idade é: {{AGE}}} </p> // <p> minha fruta favorita é: {{fruta}} </p> // 'App/modelos/app-template.html'})Entre eles, App/modelos/app-template.html representa o arquivo app-template.html na pasta Modelos no diretório raiz do programa (em vez de angular2-travel) e, em seguida, copie o fragmento HTML que escrevemos antes.
Do processo acima, podemos ver que o Angular2 ainda usa os aparelhos duplos usados pelo Angular1; É usado como um símbolo de interpolação, onde o símbolo de interpolação aparece são os dados que queremos exibir. Em seguida, precisamos aprender a usar a instrução interna NGFOR. Os alunos familiarizados com o Angular1 devem facilmente começar com esta instrução, porque o NGFOR e o NG-REPET são basicamente os mesmos; É usado para fazer loop um objeto iterável, que geralmente é uma matriz.
Em seguida, adicionamos outro atributo FruitsList ao appComponent, como mostrado abaixo:
classe de exportação appComponent {userName = 'Dreamapple'; idade = 22; fruitslist = ['maçã', 'laranja', 'pêra', 'banana']; fruta = this.FruitsList [0]; // use this.FruitsList [0]}O que precisamos prestar atenção é o lugar comentado. Devemos usar isso.FruitsList para nos referir aos atributos que definimos acima. Se for usado o FruitSlist, o Angular não saberá o que representa.
Em seguida, vamos percorrer essa matriz de frutas e ver como representá -la no modelo.
@Component ({Selector: 'My-App', Modelo: `<p> Meu nome é: {{UserName}}} </p> <p> Minha idade é: {{Age}} </p> <ul> <li *ngffor =" Let Fruitslist <li) </p> <ul> <li *ng = "Let Fruitslist <li) </} {{fruit}} </p> `})Há várias coisas que precisam receber atenção no código acima. Primeiro, usamos *ngfor em vez de ngfor. O * aqui não pode ser removido; Se for removido, nosso programa não reportará um erro, mas apenas faremos o primeiro item da matriz. Em relação ao por que você precisa adicionar *, você pode dar uma olhada na sintaxe do modelo aqui em detalhes; Obviamente, podemos escrever algumas operações por trás da expressão *ngfor que pode nos ajudar a mostrar cada índice, que pode ser como o seguinte:
<li *ngfor = "Deixe o fruto do fruitslist; deixe i = index;"> {{i}}-{{fruit}} </li>
Há algumas coisas a serem observadas no código do modelo acima. Primeiro de tudo, você precisa saber que *ngfor é seguido por expressões, para que possamos escrever algumas expressões simples para nos ajudar a fazer o loop melhor; Também usamos as palavras-chave LET, adicione o escopo no nível do bloco e limitamos essas variáveis ao bloco de loop *ngfor. Ok, se você quiser saber mais sobre *ngfor, pode dar uma olhada na API oficial sobre o NGFOR.
A próxima instrução a ser introduzida é o NGIF. Obviamente, esta instrução é basicamente semelhante à instrução NG-IF do Angular1. Decida se deve adicionar ou remover um elemento no DOM com base no valor da seguinte expressão.
Veja como usamos esta diretiva no modelo:
<p *ngif = "fruitslist.length> 3"> O comprimento do fruitslist é maior que 3 </p>
<p *ngif = "fruitslist.length <= 3"> O comprimento do fruitslist não é maior que 3 </p>
Primeiro de tudo, devemos ressaltar que, como usar *ngfor, usamos *ngif; Em seguida, podemos escrever uma expressão após *ngif, e o resultado esperado de retorno dessa expressão é um valor booleano; Em seguida, a diretiva *NGIF decidirá se deve adicionar ou remover o elemento que controla no DOM com base no valor dessa expressão.
Como usamos o TypeScript, podemos usar muitos novos recursos, como usar classes para criar instâncias; Em seguida, usaremos a classe de frutas para construir nossa instância de frutas. Primeiro, criamos uma nova pasta sob a pasta do aplicativo e depois criamos um arquivo de frutas.ts, onde escrevemos o código da classe de frutas:
Classe de exportação Fruit {Construtor (Nome público: String, Public Preço: Número) {}}Vamos explicar o código acima. Usamos o construtor e declaramos duas propriedades desse objeto no construtor; Um é o nome e o outro é o preço. Usamos o nome: String e Preço: Parâmetros de Número no construtor para criar e inicializar as propriedades desse objeto. Em seguida, podemos usar esta classe em nosso programa;
Primeiro, apresente esta aula em app.component.ts:
importar {fruit} de './classes/fruits';
Em seguida, use a classe de frutas no AppComponent para inicializar nossa lista de frutas:
classe de exportação appComponent {userName = 'Dreamapple'; idade = 22; FruitsList = [New Fruit ('Apple', 20), New Fruit ('Orange', 30), New Fruit ('Pear', 40), New Fruit ('Banana', 50)]; // NoinsPection tysecriptUnResolvedVariable Fruit = this.FruitsList [0] .Name; // use this.FruitsList [0]}Então precisamos mudar nosso modelo:
A cópia do código é a seguinte:
<li *ngfor = "Deixe o fruto do fruitslist; vamos i = index;"> {{i}}-{{fruit.name}}-{{fruit.price}} </li>
O resultado final deve ser o seguinte:
Finalmente, devo dizer que o ES6 e o TypeScript me fazem sentir como escrever Java; Este também é um profissional e um. A vantagem é que aumenta a legibilidade do código, torna o programa mais fácil de manter e escreve projetos em larga escala mais convenientes, tornando o trabalho em equipe muito conveniente. Obviamente, existem algumas deficiências, que aumentam principalmente os custos de aprendizagem de todos; Claro, tudo está ansioso.