В этой главе мы узнаем, как использовать Angular2, чтобы показать данные и как использовать свои встроенные инструкции NgFor и NgIf
Во -первых, убедитесь, что у вас есть программа Angular2 Sample, которую можно запустить. Лучше всего быть небольшим проектом QuickStart, который мы завершили в предыдущей главе или небольшой проект, который вы выполнили в соответствии с шагами выше официального веб -сайта, потому что наши объяснения основаны на этой основе; Тогда давайте начнем следующее счастливое путешествие.
Поскольку наша серия статей использует TypeScript , прежде чем читать следующий контент, вы можете также посмотреть на типы TypeScript или ES6. Их URL -адреса - TypeScript и ES6. Если вы изучали аналогичные объектно-ориентированные языки, такие как Java или C ++, ранее, будет легко изучить классы здесь; Классы здесь в основном похожи на эти языки.
В предыдущем разделе мы экспортировали пустой класс в app.component.ts , поэтому нам нужно начать заполнять его, чтобы сделать его полным. Сначала мы добавляем три атрибута в класс AppComponent (компонент), имя, возраст, фрукты; Так же, как следующее:
Export Class AppComponent {userName = 'dreamApple'; возраст = 22; Fruit = 'Apple'}Приведенный выше метод написания на самом деле является лишь формой аббревиатуры, но полный метод написания должен быть следующим:
Export Class AppComponent {// userName = 'dreamApple'; // возраст = 22; // fruit = 'Apple' Имя пользователя: String; Возраст: число; фрукты: струна; constructor () {this.username = 'dreamapple'; this.age = 22; this.fruit = 'Apple'; }}Затем мы должны изменить наш шаблон, потому что мы должны использовать больше HTML в шаблоне, поэтому мы должны использовать бэки для обертывания наших фрагментов HTML; Наша функция декоратора заключается в следующем:
@Component ({selector: 'my-app', шаблон: `<p> Мое имя: {{username}} </p> <p> Мой возраст: {{aste}} </p> <p> Мой любимый плод: {{fruit} </p>`})Конечно, мы также можем использовать параметры конфигурации шаблона объекта метаданных в функции декоратора, как показано ниже:
@Component ({selecter: 'my-app', // template: `// <p> мое имя: {{username}} </p> // <p> Мой возраст: {{age}} </p> // <p> Мой любимый плод: {{fruit} </p> //`, Темплу 'app/templates/app-template.html'})Среди них App/Templates/App-template.html представляет файл app-template.html в папке шаблонов под корневым каталогом программы (а не Angular2-Travel), а затем скопируйте фрагмент HTML, который мы писали ранее.
Из приведенного выше процесса мы видим, что Angular2 по -прежнему использует двойные скобки, используемые Angular1; Он используется в качестве символа интерполяции, где появляется символ интерполяции - это данные, которые мы хотим отобразить. Затем нам нужно научиться использовать встроенную инструкцию NGFOR. Студенты, знакомые с Angular1, должны легко начать с этой инструкции, потому что NGFOR и NG-Repeat в основном одинаковы; Он используется для цикла итерабируемого объекта, который, как правило, является массивом.
Далее мы добавляем еще один атрибут FruitsList в AppComponent, как показано ниже:
Export Class AppComponent {userName = 'dreamApple'; возраст = 22; fruitslist = ['Apple', 'Orange', 'Pear', 'Banana']; fruit = this.fruitslist [0]; // Использовать это.fruitslist [0]}На что нам нужно обратить внимание, это закомментированное место. Мы должны использовать это. Fruitslist для обозначения атрибутов, которые мы определили выше. Если используется Fruitslist, Angular не будет знать, что он представляет.
Затем мы собираемся пройти через этот фруктовый массив и посмотреть, как представить его в шаблоне.
@Component ({selector: 'my-app', шаблон: `<p> Мое имя: {{username}} </p> <p> Мой возраст: {{age}} </p> <ul> <li *ngfor =" Пусть плод Fruitslist "> {{fruit} </li> </ul> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> {{fruit}} </p> `})Есть несколько вещей, на которые необходимо обратить внимание в приведенном выше коде. Во -первых, мы использовали *ngfor вместо ngfor. * Здесь не может быть удален; Если он будет удален, то наша программа не сообщит об ошибке, но мы только разыгрываем первый элемент массива. Что касается того, почему вам нужно добавить *, вы можете подробно рассмотреть синтаксис шаблона здесь; Конечно, мы можем написать некоторые операции за выражением выражения, которое может помочь нам показать каждый индекс, что может быть похоже на следующее:
<li *ngfor = "Пусть плод Fruitslist; let i = index;"> {{i}}-{{fruit}} </li>
Есть некоторые вещи, которые следует отметить в приведенном выше коде шаблона. Прежде всего, вам нужно знать, что *ngfor сопровождаются выражениями, поэтому мы можем написать несколько простых выражений, чтобы помочь нам лучше погрузиться; Мы также используем ключевые слова LET, добавляем область на уровне блоков и ограничиваем эти переменные в блок петли *ngfor. Хорошо, если вы хотите узнать больше о *ngfor, вы можете взглянуть на официальный API о NGFOR.
Следующая инструкция, которая будет представлена NGIF. Конечно, эта инструкция в основном похожа на инструкцию Angular1 NG-IF. Решите, добавлять или удалить элемент в DOM на основе значения следующего выражения.
Посмотрите, как мы используем эту директиву в шаблоне:
<p *ngif = "fruitslist.length> 3"> Длина Fruitslist больше 3 </p>
<p *ngif = "fruitslist.length <= 3"> Длина FRUITSLIST не больше 3 </p>
Прежде всего, мы должны отметить, что, как и в использовании *ngfor, мы используем *ngif; Затем мы можем написать выражение после *ngif, и ожидаемый результат возврата этого выражения является логическим значением; Затем директива *ngif решит, добавить или удалить элемент, который он управляет на DOM на основе значения этого выражения.
Поскольку мы используем TypeScript, мы можем использовать много новых функций, таких как использование классов для создания экземпляров; Далее мы будем использовать класс фруктов, чтобы построить наш экземпляр фруктов. Сначала мы создаем новую папку в папке приложения, а затем создаем файл Fruit.ts, где пишем код класса фруктов:
Экспортный класс Fruit {Constructor (Public name: String, Public Price: Number) {}}Давайте объясним приведенный выше код. Мы используем конструктор и объявляем два свойства этого объекта в конструкторе; Один из них, а другой - цена. Мы используем имя: строка и цена: параметры номера в конструкторе для создания и инициализации свойств этого объекта. Далее мы можем использовать этот класс в нашей программе;
Во -первых, представьте этот класс в app.component.ts:
Импорт {Fruit} от './classes/fruits';
Затем используйте класс фруктов в AppComponent, чтобы инициализировать наш список фруктов:
Export Class AppComponent {userName = 'dreamApple'; возраст = 22; fruitslist = [новый фрукт («яблоко», 20), новый фрукты («апельсин», 30), новый фрукты («груша», 40), новый фрукт («банан», 50)]; // NOINSPECTION TYPESCROPUNRESOLVERVAIBLE FRUTD = this.fruitslist [0] .name; // Использовать это.fruitslist [0]}Тогда нам нужно изменить наш шаблон:
Кода -копия выглядит следующим образом:
<li *ngfor = "let Fruit of Fruitslist; let i = index;"> {{i}}-{{fruit.name}}}-{{fruit.price}} </li>
Окончательный результат должен быть следующим:
Наконец, я должен сказать, что как ES6, так и TypeScript заставляют меня писать Java; Это также профессионал и кон. Преимущество заключается в том, что он увеличивает читаемость кода, облегчает обслуживание программы и пишет крупномасштабные проекты более удобными, что делает командную работу очень удобной. Конечно, есть некоторые недостатки, которые в основном увеличивают затраты на обучение каждого; Конечно, все с нетерпением ждут.