Hướng dẫn concat string html angular - concat chuỗi html góc

Trong góc, bạn có thể sử dụng kỹ thuật nội suy để nối một chuỗi với một biến bên trong thẻ phần tử HTML.

Đây là một ví dụ.

Tôi có một bảng bên trong mẫu ứng dụng của tôi. Các hàng bảng được điền với dữ liệu được trích xuất từ ​​mảng JSON, được khai báo trong lớp thành phần của tôi. Mỗi hàng có một nhãn được đính kèm (dựa trên một điều kiện) và ID của mỗi nhãn sẽ có một chuỗi được nối với một biến.id of each label will have a string concatenated with a variable.

Thành phần ứng dụng (App.component.ts)

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
 
    ngOnInit () {  }

    
    employees: any [] = [
        { 'id': '001', 'name': 'Alpha', 'age': 37 },
        { 'id': '002', 'name': 'Bravo', 'age': 27 },
        { 'id': '003', 'name': 'Charlie', 'age': 29 },
        { 'id': '004', 'name': 'Delta', 'age': 19 },
        { 'id': '005', 'name': 'Echo', 'age': 32 }
    ];

    showID(e) {
        alert(e.target.id);
    }
}

Bây giờ, bạn có thể tự động đặt hoặc gán văn bản nhãn trên nút Nhấp vào góc. Now, you can Dynamically set or assign Label Text on button click in Angular.

Mẫu (app.component.html)

  

      

          

              
Employee Name
              
Age
              
Status
          
      
      

          

              
{{myVar.name}}
              
{{myVar.age}}
                  
              

                Clear
              
              

                Pending
              
          
      
  

Tôi đã nhấn mạnh phần trong đánh dấu trên, nơi tôi đã kết nối một chuỗi với biến myvar.id, bên trong thẻ, sử dụng kỹ thuật nội suy. ID của mỗi nhãn có giá trị chuỗi (như rõ ràng hoặc giữ) được nối với ID của một nhân viên.highlighted the portion in the above markup, where I have concatenated a string with the variable myVar.id, inside the tag, using the Interpolation technique. The id of each label has a string value (like Clear or Hold) concatenated with the id of an employee.

Nội suy trong góc là gì?

Nội suy là một kỹ thuật cho phép người dùng liên kết một giá trị với một phần tử bên trong mẫu ứng dụng. Nó sử dụng hai niềng răng xoăn mở và đóng như thế này, {{some_varable}}. is a technique that allows users to bind a value to an element inside the application template. It uses two open and close curly braces like this, {{ some_variable }}.

Trong ví dụ trên của tôi,

id = "{{'Clear' + myvar.id}}"

và

id = "{{'giữ' + myvar.id}}"

Chà, đó là nó. Cảm ơn vì đã đọc. ☺☺

← Trước đó →Next →

Đây là mã HTML của tôi với Ionic 2

     

        ...
      

Từ mã trên đây là khu vực tập trung của tôi:

... id="m{{elementid}}" ...

Làm thế nào tôi có thể dễ dàng kết hợp M với yếu tố biến đổi? Điều này không làm việc cho tôi.

Peterh

11.1K16 Huy hiệu vàng82 Huy hiệu bạc103 Huy hiệu đồng16 gold badges82 silver badges103 bronze badges

Đã hỏi ngày 23 tháng 6 năm 2017 lúc 16:01Jun 23, 2017 at 16:01

Emeka Obianomemeka ObianomEmeka Obianom

1.7163 huy hiệu vàng16 Huy hiệu bạc36 Huy hiệu đồng3 gold badges16 silver badges36 bronze badges

Như đã giải thích trong tài liệu góc, bạn có thể sử dụng phép nội suy:

id="{{'m' + elementid}}"

hoặc ràng buộc tài sản:

[id]="'m' + elementid"

Đã trả lời ngày 23 tháng 6 năm 2017 lúc 16:09Jun 23, 2017 at 16:09

ConnorsfanconnorsfanConnorsFan

67.7K12 Huy hiệu vàng118 Huy hiệu bạc142 Huy hiệu đồng12 gold badges118 silver badges142 bronze badges

0

Bạn có thể làm điều này bằng cách sử dụng dấu ngoặc vuông,

   [attr.id]="m+'elementid'"

Đã trả lời ngày 23 tháng 6 năm 2017 lúc 16:03Jun 23, 2017 at 16:03

SajeetharansajeetharanSajeetharan

209K59 Huy hiệu vàng336 Huy hiệu bạc384 Huy hiệu đồng59 gold badges336 silver badges384 bronze badges

1

Để thực hiện phép nội suy trong phần tử của phần tử HTML trong góc, bạn nên sử dụng [attr.attrName]="expression" hoặc trong trường hợp của bạn [attr.id]="'m' + elementid"

Đã trả lời ngày 23 tháng 6 năm 2017 lúc 16:16Jun 23, 2017 at 16:16

1