2015-06-11 9 views
7

Podążam za tutorialem na oficjalnej stronie Angular2.Moduł "" kątowy2/kątowy2 "" nie ma wyeksportowanego elementu "Dla"

https://angular.io/docs/js/latest/guide/displaying-data.html

Oto mój plik .ts:

/// <reference path="typings/angular2/angular2.d.ts" /> 
import {Component, View, bootstrap, For} from 'angular2/angular2'; 

@Component({ 
    selector: 'display' 
}) 
@View({ 
    template: '<p>name: {{myName}}</p>' + 
       '<p>Friends:</p>' + 
       '<ul>'+ 
       '<li *for="#name of names">'+ 
        '{{name}}'+ 
       '<li>'+ 
       '<ul>', 
    directives: [For] 
}) 
class DisplayComponent{ 
    myName: string; 
    names: Array<string>; 

    constructotr(){ 
     this.myName = "Alice"; 
     this.names = ["Winston", "Alex", "Shannon", "Irizu"]; 
    } 
} 

bootstrap(DisplayComponent); 

Tu jest mój HTML:

<html> 
<head> 
     <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script> 
     <script src="https://jspm.io/[email protected]"></script> 
     <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script> 
</head> 
<body> 
    <display></display> 
    <script> 
     System.import('show-properties'); 
    </script> 
</body> 

</html> 

I mam zainstalowane angular2, Rx i ES6-obietnicy.

Nadal błąd nie ustępuje.

wiadomość TS6042: Kompilacja zakończona. Obserwowanie zmian w plikach. wiadomość TS6032: Wykryto zmianę pliku. Rozpoczęcie przyrostowej kompilacji ... show-properties.ts (2,37): błąd TS2305: Moduł "" kątowy2/kątowy2 "" nie ma elementu expo "For". wiadomość TS6042: Kompilacja zakończona. Obserwowanie zmian w plikach.


Aktualizacja

Tu jest mój zaktualizowany kod .ts:

/// <reference path="typings/angular2/angular2.d.ts" /> 
import { 
ComponentAnnotation as Component, 
    ViewAnnotation as View, bootstrap, NgFor 
} from 'angular2/angular2'; 



@Component({ 
    selector: 'display' 
}) 
@View({ 
    template: '<p>name: {{myName}}</p>' + 
       '<p>Friends:</p>' + 
       '<ul>'+ 
       '<li *ng-for="#name of names">'+ 
        '{{name}}'+ 
       '<li>'+ 
       '<ul>', 
    directives: [NgFor] 
}) 
class DisplayComponent{ 
    myName: string; 
    names: Array<string>; 

    constructotr(){ 
     this.myName = "Alice"; 
     this.names = ["Winston", "Alex", "Shannon", "Irizu"]; 
    } 
} 

bootstrap(DisplayComponent); 

angular2.d.ts wciąż alfa 26.

Teraz nie ma błędu wiadomość i widzę

imię i nazwisko: Przyjaciele:

Ale żadna wartość nie jest wstawiona. I mam komunikat o błędzie:

show-properties.ts (7,2): error TS2348: Wartość typu 'typeof ComponentAnnotation' nie jest wymagalne. Czy chcesz uwzględnić "nowy"? show-properties.ts (10,2): błąd TS2348: Wartość typu "typeof ViewAnnotation" nie jest wywoływalna. Czy chcesz uwzględnić "nowy"? wiadomość TS6042: Kompilacja zakończona. Obserwowanie zmian w plikach.

Odpowiedz

13

Twoim problemem jest to, że dokumentacja nie jest zsynchronizowana. Jeśli ostatnio wykonałeś dokumentację do instalacji, to zainstalowałbyś typowania dla najnowszej wersji alpha26, która ma wiele uszkodzonych zmian. A dokumentacja używa wersji 23 z tą wersją kodu. Możesz albo

1) Zaktualizuj swoje pisanie do starszej wersji, która pasuje do v23, którą możesz find it here. Skopiuj zawartość i zastąp ją w ./typings/angular2/angular2.d.ts.

2) Zmień swój kątowy skrypt na alpha 26 i napraw kilka rzeczy.

  • For jest teraz NgFor, If jest teraz NgIf
  • *for jest teraz *ng-for, *if jest teraz *ng-if ...
  • injectables (jeśli masz zamiar używać w ustawieniach dyrektywy) jest teraz appInjector

  • zainstaluj typings dla es6-promise, rx i rx-lite przy użyciu tej samej komendy tsd query xxx --action install.

    Demo - 23

    Demo - 26

Można również użyć starcie z angular-class webpack starter.

+0

Hi następnie 2nd sugestię. Teraz pojawia się komunikat o błędzie. Proszę zobaczyć moją aktualizację. dziękuję – Franva

+1

Używając Typsespt nie powinieneś używać tej "adnotacji jako" chyba. Po prostu robię 'import {Komponent, Widok, bootstrap, NgFor} z 'angle2/angular2';' Ten był dla kodu es6 w pnkr. Zainstaluj również typowania, o którym wspomniałem powyżej w zaktualizowanej odpowiedzi, jeśli o to poprosi. Zwróć również uwagę na pisownię 'constructor', w kodzie znajduje się literówka. Mam nadzieję, że powinieneś móc dowiedzieć się tutaj. – PSL

+0

Dziękuję za pomoc i cierpliwość. Problem został w końcu rozwiązany :) – Franva

4

Tak, zmieniono nazwę na ng-for. To samo z ng-if. Wystarczy zaktualizować go w pliku ts i wyświetlić.

Mam kilka próbek tutaj, jeśli jesteś zainteresowany w niektórych przykładach roboczych kątowe 2.0: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

+1

Dzięki TGH, sprawiłem, że mój program działa. Po zapoznaniu się z kilkoma tutorialami Angular2 odkryłem, że jest zbyt wiele nieaktualnych dokumentów, przerywam aktualizacje itp. Postanowiłem zaczekać, aż pojawi się stabilna wersja. Ale doceń swoją pomoc :) – Franva

Powiązane problemy