如何在 angular 組件中的變量之間添加空格

Question

我有以下 function，我想從中返回帶有計數的切片字符，如下例所示。

例如 - abcd、測試、紅色、藍色、綠色、黃色

預計 output -

abcd,test,red,blue,g .....................(11)

我的代碼工作正常，但不是 -------- 我想要計數之間的空格。

viewMore(text) {
    if (text.tag_value_constraint && text.tag_value_constraint.values) {
      const enumText = text.tag_value_constraint.values[0];
      const count = 30;
      return enumText.slice(0, count) + (enumText.length > count ? "------("+(enumText.length - enumText.slice(0, count).length)+")" : "");
    }  
  } 

Answer 1

這應該工作

viewMore(text) {
  if (text.tag_value_constraint && text.tag_value_constraint.values) {
    const enumText = text.tag_value_constraint.values[0];
    const count = 30;
    return enumText.slice(0, count) + (enumText.length > count ? " (" + (enumText.length - enumText.slice(0, count).length) + ")" : "");
  }
} 

此外，您可以使用字符串文字以更簡潔的方法 go：

viewMore(text) {
  if (text.tag_value_constraint && text.tag_value_constraint.values) {
    const enumText = text.tag_value_constraint.values[0];
    const count = 30;
    const additionalText = (enumText.length > count) ? ` (${(enumText.length - enumText.slice(0, count).length)})` : "";
    return enumText.slice(0, count) + additionalText;
  }
}

Answer 2

1. 首先將“------(”替換為“(”，如果你想要單個空格，如果你需要多個空格，請告訴我。
2. 為什么要計算 enumText.slice(0, count).length，當 enumText.length > count 那么 enumText.slice(0, count) 總是長度計數。

請參閱下面的代碼 -

viewMore(text) {
if (text.tag_value_constraint && text.tag_value_constraint.values) {
  const enumText = text.tag_value_constraint.values[0];
  const count = 30;
  return enumText.slice(0, count) + (enumText.length > count ? " ("+(enumText.length - count)+")" : "");
}  

}

對於多個空格插值綁定 {{}} 將不起作用 - 使用 HTML 文件中的綁定<p [innerHTML]="enumText"> </p>無論您使用什么變量名來保存值

在 TS 文件中，您需要更改代碼如下 -

viewMore(text) {
if (text.tag_value_constraint && text.tag_value_constraint.values) {
  const enumText = text.tag_value_constraint.values[0];
  const count = 30;
  return enumText.slice(0, count) + (enumText.length > count ? "       ("+(enumText.length - count)+")" : "");
}  

}

希望這會幫助您解決問題。

Answer 3

 viewMore(text) {
      if (text.tag_value_constraint && text.tag_value_constraint.values) {
         const enumText = text.tag_value_constraint.values[0];
         const count = 30;
          return enumText.slice(0, count) + (enumText.length > count ? "      ("+ 
        (enumText.length - enumText.slice(0, count).length)+")" : "");
       `enter code here`}  
   } 

Answer 4

您也可以按照以下部分進行操作-

 const text = 'abcd,test,red,blue,green,yellow'; function viewMore(text) { if (text) { const enumText = text[0]; const count = 20; return text.slice(0, count) + ' '.repeat(text.length - count) + (text.length - count); } } console.log(viewMore(text));