Matt Raible vor 7 Jahren
Ursprung
Commit
3a2a5d362a
1 geänderte Dateien mit 17 neuen und 10 gelöschten Zeilen
  1. 17
    10
      TUTORIAL.md

+ 17
- 10
TUTORIAL.md Datei anzeigen

@@ -408,9 +408,7 @@ Modify `beer.html` to show the list of beers.
408 408
 <ion-content padding>
409 409
   <ion-list>
410 410
     <ion-item *ngFor="let beer of beers" >
411
-      <ion-item>
412
-        <h2>{{beer.name}}</h2>
413
-      </ion-item>
411
+      <h2>{{beer.name}}</h2>
414 412
     </ion-item>
415 413
   </ion-list>
416 414
 </ion-content>
@@ -542,11 +540,11 @@ export class BeerPage {
542 540
 Update `beer.html` to display the image retrieved:
543 541
 
544 542
 ```html
545
-<ion-item>
546
-    <ion-avatar item-left>
547
-      <img src="{{beer.giphyUrl}}">
548
-    </ion-avatar>
549
-    <h2>{{beer.name}}</h2>
543
+<ion-item *ngFor="let beer of beers">
544
+  <ion-avatar item-left>
545
+    <img src="{{beer.giphyUrl}}">
546
+  </ion-avatar>
547
+  <h2>{{beer.name}}</h2>
550 548
 </ion-item>
551 549
 ```
552 550
 
@@ -576,12 +574,14 @@ Change the header in `beer.html` to have a button that opens a modal to add a ne
576 574
 In this same file, change `<ion-item>` to have a click handler for opening the modal for the current item.
577 575
 
578 576
 ```html
579
-<ion-item (click)="openModal({id: beer.id})">
577
+<ion-item *ngFor="let beer of beers" (click)="openModal({id: beer.id})">
580 578
 ```
581 579
 
582 580
 Add `ModalController` as a dependency in `BeerPage` and add an `openModal()` method.
583 581
 
584 582
 ```typescript
583
+import { ModalController } from 'ionic-angular';
584
+
585 585
 export class BeerPage {
586 586
   private beers: Array<any>;
587 587
 
@@ -589,7 +589,7 @@ export class BeerPage {
589 589
               public modalCtrl: ModalController) {
590 590
   }
591 591
 
592
-  // ionViewDidLoad method
592
+  // ionViewDidLoad()
593 593
 
594 594
   openModal(beerId) {
595 595
     let modal = this.modalCtrl.create(BeerModalPage, beerId);
@@ -723,6 +723,13 @@ save(beer: any): Observable<any> {
723 723
 }
724 724
 ```
725 725
 
726
+This won't work because `/beers` is not an auto-authorized URI. To fix this, add this URI as to the StormpathConfiguration in `src/app/app.module.ts`.
727
+
728
+```typescript
729
+spConfig.autoAuthorizedUris.push(new RegExp('http://localhost:8080/good-beers'));
730
+spConfig.autoAuthorizedUris.push(new RegExp('http://localhost:8080/beers'));
731
+```
732
+
726 733
 ### Add Swipe to Delete
727 734
 
728 735
 To add swipe-to-delete functionality on the list of beers, open `beer.html` and make it so `<ion-item-sliding>` wraps `<ion-item>` and contains the `*ngFor`. Add a delete button using `<ion-item-options>`.