Hướng dẫn how do i declare a variable in html in angular 6? - làm cách nào để khai báo một biến trong html ở góc 6?

318

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi có mẫu sau:

  {{aVariable}}

và muốn kết thúc với:

  {{a}}

Có cách nào để làm điều đó ?

hỏi ngày 26 tháng 7 năm 2016 lúc 6:16Jul 26, 2016 at 6:16

ScipionscipionScipion

10,8K17 Huy hiệu vàng68 Huy hiệu bạc128 Huy hiệu đồng17 gold badges68 silver badges128 bronze badges

8

Cập nhật

Chúng ta chỉ có thể tạo Chỉ thị như

      {{variable | json}}

6 và gọi nó là

      {{variable | json}}

7

ng-var.directive.ts

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

Với chỉ thị

      {{variable | json}}

7 này, chúng tôi có thể sử dụng

      {{variable | json}}

hoặc

    {{variable | json}}

hoặc

    {{variable | json}}

hoặc

    {{variable | json}}

Ví dụ plunker angular4 ngvar

Xem thêm

• Trường hợp 4 góc 4 định nghĩa "là hành vi" VAR "cho *ngif?

Câu trả lời ban đầu

Góc V4 góc

1. 
         {{variable | json}}
   
   

   9 +

   
       {{variable | json}}
   
   

   0 +

   
       {{variable | json}}
   
   

   1
   {{varable.a}} {{varable.b}}

2. 
         {{variable | json}}
   
   

   9 +

   
       {{variable | json}}
   
   

   0 +

   
       {{variable | json}}
   
   

   4

lượt xem

  {{variable.a}}
  {{variable.b}}
  {{variable.c}}

component.ts

export class AppComponent {
  x = 5;
}

1. Nếu bạn không muốn tạo trình bao bọc như

   
         {{variable | json}}
   
   

   9, bạn có thể sử dụng

   
       {{variable | json}}
   
   

   6

lượt xem

  {{variable.a}}
  {{variable.b}}
  {{variable.c}}

Nếu bạn không muốn tạo trình bao bọc như

      {{variable | json}}

9, bạn có thể sử dụng

    {{variable | json}}

6

Như @Keith đã đề cập trong các bình luận

Điều này sẽ hoạt động trong hầu hết các trường hợp nhưng nó không phải là một giải pháp chung vì nó dựa vào biến là sự thật

Xem Cập nhật cho một cách tiếp cận khác.Apr 2, 2017 at 20:06

Đã trả lời ngày 2 tháng 4 năm 2017 lúc 20:06yurzui

Yurzuiyurzui31 gold badges415 silver badges389 bronze badges

23

197K31 Huy hiệu vàng415 Huy hiệu bạc389 Huy hiệu đồng

Bạn có thể khai báo các biến trong mã HTML bằng cách sử dụng phần tử

    {{variable | json}}

7 trong góc 2 hoặc

    {{variable | json}}

8 trong góc 4+.

  {{a}}

0

Các mẫu có một đối tượng ngữ cảnh có thuộc tính có thể được gán cho các biến bằng cách sử dụng cú pháp liên kết

    {{variable | json}}

1. Lưu ý rằng bạn phải chỉ định một ổ cắm cho mẫu, nhưng nó có thể là một tham chiếu đến chính nó.

  {{a}}

1

Bạn có thể giảm số lượng mã bằng cách sử dụng thuộc tính

    {{variable | json}}

0 của đối tượng ngữ cảnh thay vì thuộc tính tùy chỉnh.

  {{a}}

2

Đối tượng bối cảnh có thể là một đối tượng theo nghĩa đen hoặc bất kỳ biểu thức ràng buộc nào khác. Các ví dụ hợp lệ khác:Jun 13, 2017 at 6:50

Đã trả lời ngày 13 tháng 6 năm 2017 lúc 6:50Steven Liekens

Steven Liekenssteven Liekens8 gold badges56 silver badges82 bronze badges

11

12.5k8 Huy hiệu vàng56 Huy hiệu bạc82 Huy hiệu Đồng

  {{a}}

3

Xấu xí, nhưng:

  {{a}}

4

Khi được sử dụng với async Ống:Nov 22, 2016 at 20:50

Đã trả lời ngày 22 tháng 11 năm 2016 lúc 20:50kayjtea

Kayjteakayjtea1 gold badge18 silver badges19 bronze badges

4

2.8891 Huy hiệu vàng18 Huy hiệu bạc19 Huy hiệu đồng

  {{a}}

5

Dưới đây là một chỉ thị tôi đã viết mở rộng về việc sử dụng tham số Trình trang trí xuất khẩu và cho phép bạn sử dụng từ điển làm biến cục bộ.

  {{a}}

6

Bạn có thể sử dụng nó như sau trong một mẫu:

Tất nhiên #Local có thể là bất kỳ tên biến cục bộ hợp lệ nào.Jan 24, 2017 at 21:47

Đã trả lời ngày 24 tháng 1 năm 2017 lúc 21:47Aaron

Aaronaaron3 silver badges6 bronze badges

1

2413 Huy hiệu bạc6 Huy hiệu Đồng

  {{a}}

7

Trong trường hợp nếu bạn muốn nhận phản hồi của một hàm và đặt nó thành một biến, bạn có thể sử dụng nó như sau trong mẫu, sử dụng

    {{variable | json}}

6 để tránh sửa đổi mẫu.

  {{a}}

8

Và phương pháp trong thành phần có thể giống nhưSep 28, 2018 at 13:49

Đã trả lời ngày 28 tháng 9 năm 2018 lúc 13:49Philip John

Philip Johnphilip John9 gold badges40 silver badges67 bronze badges

1

4.9469 Huy hiệu vàng40 Huy hiệu bạc67 Huy hiệu Đồng:

Synchronous:

  {{a}}

9

Nếu bạn cần hỗ trợ tự động hoàn thành từ bên trong trong các mẫu của bạn từ dịch vụ ngôn ngữ góc:

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

0

Sử dụng ống async:Feb 17, 2020 at 5:19

Đã trả lời ngày 17 tháng 2 năm 2020 lúc 5:19Stephen Paul

Stephen Paulstephen Paul15 gold badges83 silver badges72 bronze badges

35K15 Huy hiệu vàng83 Huy hiệu bạc72 Huy hiệu đồng

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

1

Một giải pháp đơn giản làm việc cho yêu cầu của tôi là:

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

2

HOẶC

Tôi đang sử dụng phiên bản Angular: 12. Có vẻ như nó cũng có thể hoạt động với phiên bản khác.Jun 11, 2021 at 13:13

Đã trả lời ngày 11 tháng 6 năm 2021 lúc 13:13Abhishek Singh

Abhishek Singhabhishek Singh1 gold badge20 silver badges44 bronze badges

1.1271 Huy hiệu vàng20 Huy hiệu bạc

Tôi thích cách tiếp cận tạo ra một chỉ thị để thực hiện việc này (cuộc gọi tốt @yurzui).

Cuối cùng tôi đã tìm thấy một bài viết trung bình góc "Hãy để giải thích vấn đề này một cách độc đáo và đề xuất một chỉ thị cho phép kết thúc hoạt động tuyệt vời cho trường hợp sử dụng của tôi với các thay đổi mã tối thiểu.

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

3

Đây là ý chính (tại thời điểm đăng) với các sửa đổi của tôi:

• Những thay đổi chính của tôi là:
• Thay đổi tiền tố từ 'ng' thành 'Ứng dụng' (bạn nên sử dụng bất kỳ tiền tố tùy chỉnh nào của ứng dụng)

Thay đổi

    {{variable | json}}

2 thành

    {{variable | json}}

3

Không chắc chắn tại sao đội Angular không chỉ thực hiện một chỉ thị NGLET chính thức mà là whatevs.

Tín dụng mã nguồn gốc được chuyển đến @austinmatherneNov 15, 2018 at 23:09

Đã trả lời ngày 15 tháng 11 năm 2018 lúc 23:09Keego

KEEGOKEGO1 gold badge15 silver badges7 bronze badges

1

3.5891 Huy hiệu vàng15 Huy hiệu bạc7 Huy hiệu đồng

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

4

Đối với những người quyết định sử dụng chỉ thị cấu trúc để thay thế

      {{variable | json}}

6, hãy nhớ rằng bối cảnh chỉ thị không được kiểm tra loại theo mặc định. Để tạo thuộc tính Chỉ thị an toàn

    {{variable | json}}

5 nên được thêm vào, hãy xem việc gõ bối cảnh của Chỉ thị. Ví dụ:

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

5

Chỉ thị có thể được sử dụng giống như

      {{variable | json}}

6, ngoại trừ việc nó có thể lưu trữ các giá trị sai:

Hạn chế duy nhất so với

      {{variable | json}}

6 là dịch vụ ngôn ngữ góc không thể tìm ra loại biến để không hoàn thành mã trong các mẫu. Tôi hy vọng nó sẽ sớm được sửa chữa.May 25, 2020 at 14:28

Đã trả lời ngày 25 tháng 5 năm 2020 lúc 14:28Valeriy Katkov

Valeriy Katkovvaleriy Katkov15 gold badges87 silver badges112 bronze badges

1

Với Angular 12:

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

6

Đã trả lời ngày 27 tháng 9 năm 2021 lúc 17:50Sep 27, 2021 at 17:50

De Bonheurde BonheurDe Bonheur

6087 Huy hiệu bạc11 Huy hiệu đồng7 silver badges11 bronze badges

Tôi đang sử dụng Angular 6x và tôi đã kết thúc bằng cách sử dụng đoạn trích bên dưới. Tôi đã có một cảnh quan mà tôi tìm thấy người dùng từ một đối tượng tác vụ. Nó chứa mảng người dùng nhưng tôi đã chọn người dùng được gán.

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

7

Paul Rooney

20K9 Huy hiệu vàng41 Huy hiệu bạc61 Huy hiệu Đồng9 gold badges41 silver badges61 bronze badges

Đã trả lời ngày 18 tháng 10 năm 2018 lúc 9:38Oct 18, 2018 at 9:38

Các thợ máyThe Mechanic

2.0811 Huy hiệu vàng25 Huy hiệu bạc35 Huy hiệu Đồng1 gold badge25 silver badges35 bronze badges

Tôi đã cố gắng làm một cái gì đó tương tự và có vẻ như điều này đã được sửa trong các phiên bản mới hơn của Angular.

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

8

Đã trả lời ngày 15 tháng 10 năm 2021 lúc 21:32Oct 15, 2021 at 21:32

metric152metric152metric152

3922 Huy hiệu bạc16 Huy hiệu Đồng2 silver badges16 bronze badges

1

Câu trả lời ngắn giúp cho ai đó

• Biến tham chiếu mẫu thường tham chiếu đến phần tử DOM trong một mẫu.
• Cũng tham chiếu đến thành phần Angular hoặc Web và Chỉ thị.
• Điều đó có nghĩa là bạn có thể dễ dàng truy cập các biến thể ở bất cứ đâu trong một mẫu

• Khai báo biến tham chiếu bằng biểu tượng băm (#)
• Có thể truyền một biến dưới dạng tham số trên một sự kiện

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef,
        private vcRef: ViewContainerRef
    ) {}
}

9

*Tuy nhiên, bạn có thể sử dụng trình trang trí viewchild để tham khảo nó bên trong thành phần của bạn.

      {{variable | json}}

0

Tham chiếu biến FirstNameInput bên trong thành phần

      {{variable | json}}

1

Sau đó, bạn có thể sử dụng điều này .NameInputRef bất cứ nơi nào bên trong thành phần của bạn.

Làm việc với NG-Template

Trong trường hợp ng------plating, nó hơi khác một chút vì mỗi mẫu có tập hợp các biến đầu vào riêng.

https://stackblitz.com/edit/angular-2-template-reference-variable

Đã trả lời ngày 31 tháng 7 năm 2019 lúc 7:09Jul 31, 2019 at 7:09

ManojmanojManoj

1.7192 huy hiệu vàng14 Huy hiệu bạc20 Huy hiệu đồng2 gold badges14 silver badges20 bronze badges

Tôi là tác giả của https://www.npmjs.com/package/ng-let

Chỉ thị cấu trúc để chia sẻ dữ liệu như biến cục bộ vào mẫu thành phần HTML.

Mã nguồn:

      {{variable | json}}

2

Usage:

      {{variable | json}}

3

Đã trả lời ngày 12 tháng 2 lúc 6:25Feb 12 at 6:25

Simone nigrosimone nigroSimone Nigro

4.4552 Huy hiệu vàng30 Huy hiệu bạc68 Huy hiệu Đồng2 gold badges30 silver badges68 bronze badges

Câu trả lời ban đầu của @yurzui sẽ không hoạt động từ Angular 9 do - vấn đề kỳ lạ di chuyển ứng dụng Angular 8 sang 9. Tuy nhiên, bạn vẫn có thể hưởng lợi từ Chỉ thị NGVAR bằng cách sử dụng nó và sử dụng nó nhưngVar directive by having it and using it like

      {{variable | json}}

4

Mặc dù nó có thể dẫn đến cảnh báo IDE: "Biến không được xác định"

Đã trả lời ngày 7 tháng 9 năm 2020 lúc 6:03Sep 7, 2020 at 6:03

Nó đơn giản hơn nhiều, không cần bất cứ điều gì bổ sung. Trong ví dụ của tôi, tôi khai báo biến "Mở" và sau đó sử dụng nó.

      {{variable | json}}

5

Đã trả lời ngày 24 tháng 5 năm 2018 lúc 21:36May 24, 2018 at 21:36

Jack Rusjack RusJack Rus

1551 Huy hiệu bạc10 Huy hiệu đồng1 silver badge10 bronze badges

3

Làm thế nào để bạn tuyên bố một biến trong html Angular?

Làm thế nào để bạn tuyên bố một biến trong HTML?

Làm cách nào để khai báo một biến trong TypeScript?

Làm thế nào để bạn tuyên bố một biến?